Articles
iOS
Responsive-design-for-iPhone-Landscape-zoom-and-font-resize-fixes
tutorials - iOS and Web-Development.
Responsive design for iPhone: Landscape zoom and font resize fixes
Published Thu. Aug. 02, 2012
These two little tricks help make your repsonsive designs perfect for iOS in landscape mode.
1. Add the user-scable=0 and maximum-scale=1.0 to your vieport tag to fix the automatically zoomed-too-far-in bug in iOS when changing to landscape view.
<meta name="viewport" content="width=max-device-width, width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, " />
2. Next, set the text size adjust rule to media queries to turn off iOS's text resizing when changing the iPhone/iPad's orientation to landscape.
@media screen and (max-width: 767px) {
html { -webkit-text-size-adjust: none; }
}
Tag(s):
viewport, iOS, user-scalable, webkit text size adjust