Viewport Meta Tag

When people started using our free mobile website templates on Mobifreaks, they kept asking how we made them fit inside a phone screen. Was there a book I was reading? My answer, borrowing from Kung Fu Panda: there is no secret ingredient.

There is one line of code, though. Without it, phones render the page at desktop width and shrink it to fit, so everything looks tiny. With it, the page is laid out at the width of the screen.

What I used in 2011 and 2014

<!-- 2011, on Mobifreaks -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

<!-- 2014, on munwr.com -->
<meta name="viewport" content="width=device-width, user-scalable=no">

Don't use either today. maximum-scale=1 and user-scalable=no both stop people from pinch-zooming. That fails WCAG's Resize Text guideline (1.4.4) and hurts anyone who needs bigger text. Safari on iOS has ignored them since iOS 10 anyway.

What to use now

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

• width=device-width makes the layout viewport match the screen width.
• initial-scale=1 sets the zoom to 100% on load.

Optional extras

• viewport-fit=cover lets the page draw behind a phone's notch or rounded corners. Pair it with env(safe-area-inset-*) padding so content stays visible.
• interactive-widget=resizes-content resizes the page when the on-screen keyboard opens, instead of overlaying it. Browser support is still partial, so test it.

If something looks too small on mobile, fix it with CSS (font sizes, media queries), not by locking the zoom.