Sayfamızı Mobil Duyarlı Hale GetirelimHtml etiketlerimizin arasına alttaki kodumuzu ekleyelim ve sayfamızı mobil duyarlı hale getirelim. <head> </head> etiketlerimizin arasına alttaki meta etiket kodumuzu çağıralım.
<meta name="viewport" content="" />
Bu meta etiketimiz sayfanın mobil uyumlu olması için mutlaka gerekli. Content kısmımız gördüğünüz gibi boş buraya gelebileceklere bakalım ve kendimize göre burayı dolduralım.
width Sayfanın ekran genişliğine göre duyarlı hale gelmesini sağlayan koddur. Ayrıca diğer kullanımı da width=device-width şeklindedir.
height Sayfanın ekran yüksekliğine göre duyarlı hale gelmesini sağlayan kodumuzdur. Çok kullanılan bir kod değildir. Bazı projelerde kullanılabilir.
initial-scale Sayfa gösterileceği zaman ölçeklendirmeye yarar. initial-scale=1.0 şeklinde bir kullanımı vardır. 1.0 değeri ölçeklendirme yapılmamasını sağlar. 0 ve 10.0 arasında bir değer verebilirsiniz.
user-scalable Ziyaretçi sayfayı görüntülediğinde zoom (çimdikleme) veya ölçekleme yapıp yapamayacağını belirleyebileceğiniz özelliktir. yes veya no değerlerini alır. user-scalable=no şeklinde kullanılmalıdır.
maximum-scale Ziyaretçi sayfayı görüntülediğinde yapabileceği maksimum zoom’un yani yakınlaştırma-büyültme oranını belirlemenizi sağlar. maximum-scale=1.0 şeklinde kullanılabilir.
minimum-scale Aynı maximumun gibi ama bu sefer tersi şeklinde ziyaretçi sayfayı görüntülediğinde yapabileceği maksimum zoom out yani uzaklaştırma-küçültme oranını belirlemenizi sağlar. minimum-scale=1.0 şeklinde bir kullanım uygundur.
Şimdiye kadar yazıklarımız mobil uyumlu hale getirmek için bir başlangıç aşamasıydı. Devamı konumuz da çözünürlüğe göre CSS kodları belirleyebileceğim @media özelliğimizden bahsedeceğim. Daha detaylı bir konu olduğundan ayrı bölümde yazmak istedim. İkinci konuya ” Siteyi CSS ile Mobil Uyumlu Responsive Yapma ” tıklayarak gidebilirsiniz.
CSS ile HTML siteyi mobil uyumlu yapmak
CSS değişiklikleri için ise öncelikle olarak sitede yer alan style.css dosyasının uygun bir bölüme alttaki kodların eklenmesi gerekir.
@media only screend and (max-width:959px) {
kodlar buraya gelecek
}
Kodlar buraya gelecek bölümünde kullanılmak istenen özelliklere göre CSS’e uygun kodlara yer verilmelidir. Arka plan kodu ya da yazı boyutu, fontu gibi pek çok farklı değişikliğe bu bölümde yer verilebilir ve herhangi bir sınır bulunmamaktadır. Hazırlanan örnek bir çalışma ise şöyle;
<style>
@media screen and (max-width: 600px) {
body {
background-color: blue;
}
}
</style>
Yukarıdaki kod yapısında ekran genişliği 600 piksel ve 600 pikselden küçük olan ekranlarda arka plan renginin mavi olarak ayarlanması istenmiştir.
Blogger'da Youtube Videoları Mobil Uyumlu Hale Nasıl Getirilir?
- Blogger Kontrol Paneli'nde bulunan Şablon > HTML'yi düzenle seçeneklerine tıklayın.
- Kodların bulunduğu alana bir kez tıklayın ve Ctrl+F tuşlarına tıklayıp gelen arama ekranına ]]></b:skin> yazıp Enter tuşuna tıklayın.
- ]]></b:skin> kodunu bulup bir üst satırına aşağıda vermiş olduğum CSS kodunu yapıştırın.
/* CSS Only */ .post-body iframe{width:100%!important;} @media screen and (max-width:960px){ .post-body iframe{max-height:90%}} @media screen and (max-width:768px){ .post-body iframe{max-height:75%}} @media screen and (max-width:600px){ .post-body iframe{max-height:60%}} @media screen and (max-width:480px){ .post-body iframe{height:auto!important;max-height:auto!important}}- Son olarak Şablonu Kaydet seçeneğine tıklayın