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.