Those who create responsive design for iPhone may be aware of the viewport scaling bug in iPhone Safari. The bug occurs when you set the viewport width to device-width and rotate the phone to landscape view. To see this in action, view the bug demo page with your iPhone and rotate the phone from portrait to landscape view (you should see the page being scaled up). This is a known bug for a long time. Today I’m going to share some tips on how to fix this bug.
Problem (view demo)
View the demo page with an iPhone and rotate the phone from portrait to landscape.
Solution 1: Quick Meta Tag Fix (view demo)
A quick fix to this issue is by setting
maximum-scale=1 in the viewport meta tag. This fixes the problem, but the downside is that the page will no longer be zoomable with the zoom gesture.
<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1">