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