CODEWITHSUNDEEP
orientationresponsive-designviewportscreen-orientationdevice-orientation
zarinf
zarinf

Reputation: 717

Responsive site is zoomed in when flipping between Portrait and Landscape on iPad/iPhone

I've built a responsive site using Twitter Bootstrap here: http://zarin.me/cce/

The responsive design works great on iPad and iPhone, however when I flip the device from portrait to landscape, the site is zoomed in instead of adapting to the screen (pinching the screen works).

What am I missing? Is this a viewport issue? Here's the only viewport code I have in my :

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

Thanks in advance!

Upvotes: 51

Views: 52383

Answers (7)

justinavery
justinavery

Reputation: 2596

You also want to add the maximum scale

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

UPDATED I agree with some of the comments, the declaration should not limit the scaling by the user as this is bad practice. The below is a better approach and I believe that the zooming bug has long since been fixed by Apple.

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

Upvotes: 71

Amit Dwivedi
Amit Dwivedi

Reputation: 167

If you are facing issue mainly in iPhone-X try <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover" />

That's work for me.

Upvotes: 1

user1199529
user1199529

Reputation: 119

I've seen this happening when one of the containers on the page spills past 100%. The page displays ok in the initial orientation, but when the orientation is changed the extra width somehow becomes in force, causing the page to scale in, and usually leaves a margin on the right or left. Worth checking all your media queries to make sure there is not some trailing padding or margin.

Upvotes: 3

Leigh McCulloch
Leigh McCulloch

Reputation: 1976

Set initial-scale=1.0 in the meta:

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

Then set -webkit-text-size-adjust:100%; in the CSS:

body {
  -webkit-text-size-adjust: 100%;
}

This approach doesn't stop a user from zooming in on your website but will ensure that the text doesn't get size adjusted automatically by the browser.

Upvotes: 12

David Sims
David Sims

Reputation: 21

Had exactly this issue on Ipad 3 and IOS 7.1.2

Using maximum-scale=1 fixed it and allows zoom

The js solution did not work

Upvotes: 1

jjgrainger
jjgrainger

Reputation: 99

The following works for me and allows users to zoom in

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />

Upvotes: 2

minneapolisdan
minneapolisdan

Reputation: 165

While setting the maximum scale to "1" does work, it restricts your users from zooming in on anything within your site. Not ideal for user experience. Try this Javascript instead, iOS-Orientation Change Fix

Upvotes: 15

Related Questions