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. This is a known bug for a long time. Today I’m going to share some tips on how to fix this bug.
View the image below how its seen in an iPhone and rotate the phone from portrait to landscape.
Solution 1: Quick Meta Tag Fix
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">