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. To see this in action, view the bug demo page with your iPhone and rotate the phone from portrait to landscape view (you should see the page being scaled up). This is a known bug for a long time. Today I’m going to share some tips on how to fix this bug.

Problem (view demo)

View the demo page with an iPhone and rotate the phone from portrait to landscape.

viewport bug

Solution 1: Quick Meta Tag Fix (view demo)

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">

Solution 2: Javascript (view demo)

For usability concerns, setting maximum-scale is not an ideal solution because user can not zoom the page. Fortunately, there is a Javascript fix which was discovered by @mathias, @cheeaun and @jdalton. Add the following Javascript in the <head> to fix the viewport scaling bug on orientation change. With this Javascript fix, the page remains zoomable.


<script type="text/javascript">
(function(doc) {

	var addEvent = 'addEventListener',
	    type = 'gesturestart',
	    qsa = 'querySelectorAll',
	    scales = [1, 1],
	    meta = qsa in doc ? doc[qsa]('meta[name=viewport]') : [];

	function fix() {
		meta.content = 'width=device-width,minimum-scale=' + scales[0] + ',maximum-scale=' + scales[1];
		doc.removeEventListener(type, fix, true);
	}

	if ((meta = meta[meta.length - 1]) && addEvent in doc) {
		fix();
		scales = [.25, 1.6];
		doc[addEvent](type, fix, true);
	}

}(document));
</script>

Comments?

Do you know more solutions to fix this viewport scaling bug? The Javascript fix is particularly useful for coding responsive web design. Please share in the comments.

100 Comments

1 2 3 4
  1. Brad
    Apr 27, 2012 @ 9:20 am

    Thanks a ton. Apple should really fix this as it was hard to troubleshoot. My implementation works in every desktop browser back to IE7, Android, WP7, Opera Mobile, but didn’t work on iPhone/iPod.

    Thanks again

    Reply

  2. magazin
    Apr 30, 2012 @ 12:57 pm

    This does look like a great theme.as

    Reply

  3. vinay
    May 3, 2012 @ 5:12 am

    not fixing the issue

    Reply

  4. Matt
    May 3, 2012 @ 11:35 pm

    Its actually the initial-scale setting which causes this bug (not the width=device-width) as mentioned above. If you try it with just the width=device-width option it scales fine.

    Reply

  5. Toko Bunga Medan
    May 28, 2012 @ 1:06 pm

    Hai..greating..your style writing its verry good, full of info, i like all about your web, please visit my blog , thanks.. Toko bunga medan ..

    Reply

  6. Masa
    Jun 7, 2012 @ 10:19 pm

    I don’t think this is really a bug. It’s just iOS device trying to keep consistent viewport when you switch from portrait to landscape view. Assuming you have width=device-width and initial-scaling-1.0 declared, when you view a site using iPhone in portrait view, viewport width is set to 320px with scaling of 1.0. Switching to landscape view, viewport width will then change to 480px (because you declared it to). But the current viewport area will not change. What changes is the scaling (since you only declared initial scaling), so you end up with a viewport width of 480px with scaling of 1.5 which shows 320px of content, same width as what you started out with. That’s why restricting scaling fixes it.

    Reply

  7. Nathan Deamer
    Jun 17, 2012 @ 4:12 pm

    Been having a few problems with this:

    1. When you first hit the webpage and try to pinch and zoom it doesn’t work – but works the second time you try.

    2. Zoom out while in portrait mode then go to landscape mode – same problem comes back.

    Reply

    • James Nash
      Aug 6, 2012 @ 9:10 am

      Yup, I have observed the exact same problems. I suppose the JS needs some more work (well, really mobile Safari ought to get fixed).

      Still, it’s better than nothing so thanks for sharing this!

      Reply

    • Vitaliy
      Sep 18, 2012 @ 11:58 am

      I tryed to implement this fix via event listener fo the orientation change:
      window.onorientationchange = function() {…}
      Hope this can help to fix bug

      Reply

  8. Jacek
    Jul 3, 2012 @ 5:35 pm

    It’s very useful. Thanks you! :-)

    Reply

  9. Jimba
    Jul 12, 2012 @ 4:37 am

    Thanks guys,

    It is really helpful.

    :)

    Reply

  10. carlo
    Jul 26, 2012 @ 6:35 pm

    great solution thank you. When I use the meta tag and javascript code it’s works but when it is in landscape mode I need to tap the screen about two times for the web page to rescale back to original. Is there a way to prevent this? e.g. the webpage should rescale automatically in landscape mode when it is rotated from portrait mode.

    Reply

  11. Ibiza yates
    Jul 29, 2012 @ 7:00 pm

    Switching to landscape view, viewport width will then change to 480px (because you declared it to). But the current viewport area will not change. What changes is the scaling (since you only declared initial scaling), so you end up with a viewport width of 480px with scaling of 1.5 which shows 320px of content, same width as what you started out with. That’s why restricting scaling fixes it.

    Reply

  12. Chucklebot
    Aug 4, 2012 @ 12:27 pm

    Thank you so much to the commenters! I wasted a couple of hours going through Apple Docs and various blog entries about this issue. I read the Javascript solution here (which is awesome by the way) but I’m trying to keep my site super lightweight and wanted to avoid that if at all possible.

    Anyway, it turns out that I was using setting initial-scale and minimum-scale, which was screwing up my layout in portrait orientation. When I took those two things out, voila.

    Reply

  13. thiet ke logo
    Aug 14, 2012 @ 3:44 am

    So much information on this topic is written in the same old fashion. You have brought new life into this subject matter with your fresh views. I agree with you….

    Reply

  14. Caroline
    Aug 25, 2012 @ 8:19 am

    Still not working :( Sorry

    Reply

  15. Claus Heinrich
    Aug 26, 2012 @ 3:15 am

    Appreciate this fix – works for me on apple devices.

    Reply

  16. Peter Wooster
    Dec 4, 2012 @ 8:23 am

    This problem is fixed in iOS 6 Safari, and in iOS Chrome. A very clever JS fix was posted by Scott Jehl. It uses the accelerometer to detect orientation changes. You can find my fork of this tat improves the detection code at https://github.com/PeterWooster/iOS-Orientationchange-Fix

    Reply

  17. Ana
    Apr 17, 2013 @ 6:50 pm

    Hi, I know this post is kinda old, but I bumped into it, and I thought I’d share what I use, with no bugs that I can see…

    a) set a min with do the body tag
    body {
    min-width: 1000px;
    }

    b) set the same with to the viewport meta tag

    Users should now be able to:
    – see the design as you have created it
    – zoom the content
    – change the device landscape to portrait and vice versa with no issues

    Reply

    • Ana
      Apr 17, 2013 @ 6:51 pm

      the meta code (sorry):

      meta name=”viewport” content=”width=1000px”

      Reply

  18. Afzal
    May 27, 2013 @ 11:56 am

    I m jst a big fan of apple company n apple copmany

    Reply

1 2 3 4

Leave a Reply