A Tale of Two Viewports

A simple tip for those unsure of what to put in their viewport meta.

For websites

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

For web apps

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />

Viewport Options

  • width=device-width will set the viewport to the width of the device (so media queries are accurate)
  • initial-scale=1 sets the size the content should start at (and prevents iOS devices zooming when in landscape mode)
  • maximum-scale=1 sets how much the user can pinch-zooming. For example, setting this to 2 would only allow zooming up to double size. This also prevents iOS devices from zooming by 1.5x in landscape.
  • user-scalable=no prevents pinch-zoom completely.

While these are by no means appropriate for all situations, these are my go-to viewports.

Leave a Reply

Your email address will not be published.