Langkah pertama agar layout web responsive, kita harus mendefinisikan viewport dengan element meta-tag.
<head> .... <meta name="viewport" content="width=device-width, initial-scale=1"> .... </head>
Property width digunakan untuk mengatur ukuran viewport. Dapat diisi dengan angka spesifik, misalnya 600, maka viewport akan berukuran 600 pixels.
Namun pendekatan ini kurang flexible, karena setiap device memiliki ukuran yang berbeda. Gunakan device-width, agar lebar viewport akan 100% dalam CSS pixels.
Property initial-scale=1, akan memberitahu browser bahwa CSS pixels : device independent pixels adalah 1:1.
Jika initial-scale tidak didefinisikan, beberapa browser tidak akan mengubah lebar viewport ketika orientation diubah (dari portrait ke landscape).
Dan beberapa browser melakukan scale-down content webpage, bukannya melakukan reflow.