51

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!

zarinf
  • 717
  • 1
  • 8
  • 9

7 Answers7

71

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">
justinavery
  • 2,596
  • 2
  • 19
  • 21
  • 3
    try: – rockstardev Dec 08 '12 at 13:49
  • 20
    For accessibility reasons, preventing zooming is bad practice. See minneapolisdan's answer for a better solution. You can read more here: http://alwaystwisted.com/post.php?s=2013-01-10-dont-do-this-in-responsive-web-development – Michael Feb 13 '13 at 01:06
  • 2
    Preventing zoom is not bad practise. A good responsive design behaves like an app on an iphone, and you can't zoom on an app. Really like the solid feel you get from a site with no zoom. This is the best answer. – Starkers Mar 09 '14 at 22:04
  • Actually on Safari you can zoom on OSX. – nkkollaw Apr 15 '14 at 11:42
  • @Starkers — Preventing zoom is the definition of bad practice when it comes to accessibility. Why else would zoom exist? I have 20/20 vision and still find myself zooming in on text in mobile browsers, usually because two links are positioned too closely. We aren’t talking about native apps here. We’re talking about websites with finicky typography, wildly varying text sizes, and UI elements competing for space. Why any developer would disable this feature just to make their lives easier is a mystery to me. – Brandon Durham Jul 18 '18 at 17:39
  • This didn't work. The only thing that worked for me is another post with Matt Stevens answer: https://stackoverflow.com/a/2711132/1688787 – Gabe Karkanis Nov 22 '22 at 23:32
15

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

minneapolisdan
  • 165
  • 2
  • 8
  • This works well, and allows the zoom afterwards. +1 for it! I went with the `maximum-scale` though, for a few reasons. One, this is js dependent. Two, allowing the zoom breaks the layout in the same way that I was trying to prevent in the first place. I'm hoping that since it's a responsive design users shouldn't have to zoom anyway. Nice solution though! – Matthew Johnson Nov 25 '13 at 22:04
  • Its good example but in my case that JS is not working horizontal scroll is comes when I flipped my Ipad @minneapolisdan – Mayank Vadiya May 18 '16 at 07:05
12

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.

Leigh McCulloch
  • 1,886
  • 24
  • 23
  • 1
    Got a problem with the iPhone 5 ignoring the viewport meta in an iframe, resulting in an enlarged iframe in landscape mode. But this fix sorts the text size (also in the CSS buttons). – Jannik May 04 '16 at 10:53
  • 2
    This is the best (also the simplest) solution. Nothing else worked. – Alex Rogachevsky Aug 30 '16 at 18:25
  • I don't have any iphone or ipad. I tested it in chrom on windows and dev tool set to ipad, I found this problem and this answer helped me. – vee Jun 28 '17 at 16:37
3

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.

user1199529
  • 119
  • 1
  • 8
  • Thanks for making this point. I had an invisible canvas on my page that wasn't resizing on rotate and it was causing this issue. – Jephron Jan 04 '16 at 21:09
2

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" />
jjgrainger
  • 99
  • 1
  • 2
1

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

David Sims
  • 21
  • 3
1

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.

Amit Dwivedi
  • 157
  • 1
  • 5