Seting mobil viewport

 Lebar merupakan masalah dalam mobile-friendly blogspot. Pada tema lama, lebar halaman yang jadi masalah.

Viewport

Permasalahan ini teratasi, untuk sebagian besar dengan menyeting viewport.

Sisipkan :

<meta content='width=device-width, initial-scale=1' name='viewport'/>

Bagian width=device-width menyeting lebar halaman untuk mengikuti lebar layar perangkat tergantung pada jenis perangkat.

Bagian initial scale menyeting tingkat zoom inisial ketika halaman dimuat oleh browser. 

Ukuran konten ke Viewport

Pengguna terbiasa menggulir situs web secara vertikal, tidak horizontal. Jika mereka dipaksa menggulir horizontal, itu menghasilkan pengalaman pengguna yang buruk.

Aturan lain :

1. Jangan gunakan elemen lebar tetap yang besar. Hal ini akan menyebabkan area pandang bergulir secara horizontal.
2. Jangan biarkan konten bergantung pada lebar area pandang tertentu untuk dirender dengan baik, karena dimensi dan lebar layar dalam piksel CSS sangat bervariasi antar perangkat.
3. Gunakan kueri media CSS untuk menerapkan gaya yang berbeda untuk layar kecil dan layar besar. Menyetel lebar CSS absolut akan menyebabkan elemen menjadi terlalu lebar untuk area pandang pada perangkat yang lebih kecil.

   Sebagai gantinya, pertimbangkan untuk menggunakan nilai lebar relatif, seperti lebar: 100%. Juga, berhati-hatilah dalam menggunakan nilai pemosisian absolut yang besar. Ini dapat menyebabkan elemen jatuh di luar area pandang pada perangkat kecil.