HTML viewport meta tag for responsive designs

Mobile optimization

  • Published: June 21, 2016

Using the viewport meta tag

A viewport controls how a webpage is displayed on a mobile device. Without a viewport, mobile devices will render the page at a typical desktop screen width, scaled to fit the screen. Setting a viewport gives control over the page's width and scaling on different devices.

Pages optimized to display well on mobile devices should include a meta viewport in the head of the document specifying width=device-width, initial-scale=1.

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

CSS Media queries can be applied based on viewport size. Based on the characteristics of the device rendering the content, such as width and height, media queries can change the styles used for each device characteristic.

Use min-width over min-device-width to ensure the broadest experience.

Use relative sizes for elements to avoid breaking layout.

@media (query) {
  /* CSS Rules used when query matches */
Marcelo Canina
I'm Marcelo Canina, a developer from Uruguay. I build websites and web-based applications from the ground up and share what I learn here.
comments powered by Disqus
Except as otherwise noted, the content of this page is licensed under CC BY-NC-ND 4.0 ·