Setting the Viewport – Responsive Web Design Fundamentals

Articles, Blog

Setting the Viewport – Responsive Web Design Fundamentals

Setting the Viewport – Responsive Web Design Fundamentals


By adding the meta viewport
tag to the head element of the page we tell the browser
that we know what we’re doing. We need to use the meta viewport
value with=device-width, which instructs the page to match the screen’s
width in device independent pixels. This allows the page to reflow
content to match the screen sizes, whether rendered on a small
mobile device or on the laptop. Adding the attribute initial-scale=1
instructs the browsers to establish a one to one relationship between device
independent pixels and CSS pixels. CSS pixels are what we’re used to
working with most of the time, and really the only one I
need to worry about. Without initial-scale=1 some
browsers will keep the page width constant when rotating
to landscape mode. They also scale the content rather
than allowing it to reflow.

3 thoughts on Setting the Viewport – Responsive Web Design Fundamentals

  1. I never set the viewport when designing websites. By the time I found out about it, I had already been using media queries to make adjustments. All my sites test as "Mobile Friendly" via the Google mobile-friendly test, even though I never set the viewport. Does it matter if it's testing properly?

  2. thank you so much, the problem by not being set <meta name="viewport" content="width=device-width, initial-scale=1"> solve the issue my problem of why from simulator I can see the responsive is working but when i check from the real mobile device it's not working though. Now i know the reason. Thanks again 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *