iPhone Safari Viewport Scaling Bug

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.

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.

d.

Sep 2, 2011 at 1:34 am

You might want to use comma instead of semicolon in the viewport tag. Seems to trigger some errors in some browsers.
https://github.com/paulirish/html5-boilerplate/issues/626

Andrew

Sep 13, 2011 at 9:06 pm

Nice tip!

kalen

Sep 14, 2011 at 12:53 pm

Sweet, the ‘,’ got rid of an error in Safari. Thanks! Nice tip too Nic.

David

Sep 2, 2011 at 1:38 am

I use the meta tag fix, I don’t mind that it removes manual zooming, we’re generally trying to imitate native apps anyway, and you can’t zoom in on most native apps.

keakon

Sep 2, 2011 at 3:38 am

You can use width=device-width:

Gabri

Sep 2, 2011 at 7:00 am

I’m using Jeremy Keith’s fix, it’s quite similar to solution 2 http://adactio.com/journal/4470/

Phil

Sep 2, 2011 at 9:19 am

Does anyone know if the scaling bug is still present in iOS5?

Josua Pedersen

Sep 5, 2011 at 4:33 am

Yes, and it’s not a bug.

joshintosh

Sep 6, 2011 at 4:28 pm

Well, its buggin’ some people ;)

Chris

Sep 2, 2011 at 12:00 pm

Nick, the “demo” link on this text is wrong: “View the demo page with an iPhone and rotate the phone from portrait to landscape.”

RussellUresti

Sep 2, 2011 at 1:17 pm

The JS solution offered doesn’t work after the user starts to zoom in / out of the page. If they zoom in, then back out, and then change orientation, they’re met with the same scaling bug.

I also tried the Adactio solution referenced, but the script there hung up my page and it never fully loaded. Not sure why.

Tyce Clee

Sep 6, 2011 at 7:10 pm

I second that from Russell, after zooming in and rotating backwards / forwards once the same bug is presented.

In this case, the meta solution is a much better solution.

website design

Sep 4, 2011 at 12:43 pm

thanks remah i think i may been having with this JS

rexy

Sep 5, 2011 at 2:05 am

Thanks for sharing. This tutorial will help me.

Patrick

Sep 5, 2011 at 4:52 am

This great articles, I prefer the java-script matter. I wish I can contribute some viewport idea, but I don’t have such knowledge.

JB Web Design

Sep 6, 2011 at 10:53 am

Nice little resource. Thanks

Ryan Hickman

Sep 11, 2011 at 12:57 am

Thanks for sharing this fix, very helpful! A designer I work with provided some additional mobile design tips in her recent blog post. (http://www.back40design.com/news/m.blog/22/mobile-website-designers-need-to-do-less)

Thanks again, I look forward to seeing more posts like these.

Ian

Sep 28, 2011 at 6:20 am

Or you could just use…

…which fixes the original issue and allows you to set whether to allow user scaling or not.

Sep 28, 2011 at 6:22 am

…sorry, I put this in the wrong place – see below for a JavaScript free fix to this problem.

Imobiliárias Piracicaba

Sep 14, 2011 at 8:22 am

Tks for the tip. Hope Apple fix it.

Web design automaton

Sep 17, 2011 at 9:35 am

yeah you really need to thin this through if your working with zoomable content pretty nice answers though. I would definitely error on the javascript side of things for web design always works.

James

Sep 24, 2011 at 9:03 am

I’m pretty sure as long as your site is 980px wide or less, that won’t happen.

Jon

Sep 27, 2011 at 8:43 am

I normally add this meta tag for all website that i made for mobile devices, the user shouldn’t be able to zoom in and out too.

Sep 27, 2011 at 8:44 am

Sorry, add this: width=device-width,initial-scale=1.0, maximum-scale=1.0, maximum-scale=1.0, user-scalable=no,

Just set…

width=device-width,minimum-scale=1.0, user-scalable=yes|no

…fixes the issue describe above and still allows you to set whether the page is resizable by the user or not.

Serge

Oct 1, 2011 at 4:07 pm

This one sounds like the best solution. Thanks, Ian!

Scott Bolinger

Jan 10, 2012 at 4:44 pm

This fix by Ian works perfectly, why is this not in the article?

Matt

May 4, 2012 at 2:25 am

This doesn’t work generally. I can’t even find a combination where it does.

Carolynne

Aug 10, 2012 at 12:53 pm

This one works perfect for me! Thanks :)

efishinsea

Sep 15, 2012 at 12:22 am

Ian, you’re correct, and this works great.

The Javascript solution provided here works for iPhone, but causes problems with iPad. Your addition of the user-scalable=yes|no parameter solved the problems for both devices.

Thanks!

freelancehyderabad

Sep 28, 2011 at 10:25 am

nice tip

Damian

Sep 30, 2011 at 2:09 am

helpful thanks

Fahim

Sep 30, 2011 at 2:36 am

mybookmart

Oct 3, 2011 at 2:13 am

nice tip it well help me thanks

Somchai

Oct 6, 2011 at 11:51 pm

Thanks for the tips, very helpful. I will study it.

ucuz beyaz eşya

Oct 8, 2011 at 10:51 pm

thank yo

Md Shahnur Arefin

Oct 11, 2011 at 1:02 am

Thank you very much for a nice share. I will definitely implement it today

bobbor

Oct 13, 2011 at 5:59 am

this is definitely some major bug. apple should really work on this one.
I don’t like the viewport solution, and the js-fix isn’t any better.
setting hard maximums and minimums on scale may result in unusable websites.
especially if zooming is essential to your website.

Jamie Brightmore

Oct 16, 2011 at 8:02 am

I’m astonished this still hasn’t been fixed in iOS5.

To be honest, my view is simply to disallow scaling as opposed to using hacks. If your responsive layout is done correctly, i.e, fonts are set well and nothing is too small, there shouldn’t really be a need for a user to zoom-in. Native apps are fixed – users are used to this, so you could argue why should a considered responsive website/web app be any different?

Of course, there will always be exceptions.

Web Design Automaton

Oct 16, 2011 at 11:24 pm

I absolutely hate when this happens on my site. I need to fix this asap. thanks for a short and sweet post.

M

Oct 18, 2011 at 5:44 am

If I remember correctly, -webkit-text-size-adjust: none should prevent that behavior

Killt

May 11, 2012 at 10:18 am

After house of weeding through posts, trying supposed fixes (including this one), creating my own fixes… this was the thing that fixed my issue. Many thanks. I owe you a beer.

getdatinfo

Oct 21, 2011 at 2:08 pm

http://www.1hunnit.com | #1 Trusted for Webhosting SSL Certificates Reseller and MORE!!

under $2.75 Webhosting (GOOD FOR WORDPRESS!!)

Ardor

Oct 26, 2011 at 12:57 pm

Insightful post here. Very effective tutorial for iphone bug problem solution.

web design

Oct 28, 2011 at 2:20 am

This is really a great post. I like the tutorial very much. This will helfull for beginners :) Thanks for the post

Bruno

Nov 2, 2011 at 4:36 pm

Any idea on how to modify this script to make it work when the initial scale has to be 0.5 instead of 1.0? — Please, any help is always welcome.

Haeya

Nov 3, 2011 at 7:07 pm

Where do i write all this code? Thanks sharing :)

W3Spor

Nov 8, 2011 at 3:32 am

Thanks, thats new to me!

Dirt Bike Game

Nov 9, 2011 at 11:52 am

great article, very useful information for beginners

Thiết kế logo

Nov 10, 2011 at 4:25 am

This is very useful for me.Can you share with us something more like this ??? Thanks.

adumpaul

Nov 10, 2011 at 4:48 am

Nice useful article.Thank you for sharing.

Jarndice

Nov 14, 2011 at 4:22 am

Neat solution, thanks!

Jake

Nov 17, 2011 at 3:35 pm

Boo ya! Finally, a definitely solution to this symptom. I dig it.

John

Nov 17, 2011 at 7:48 pm

I couldn’t get the JS to work, but the meta tag was perfect. Thanks for sharing the info. Great site BTW. I was actually just here a few days ago studying your technique for a fixed column in a responsive layout. Thanks again.

Nov 30, 2011 at 7:23 am

You say this occurs with width is set to device-width, which I have indeed found, though not consistently so. Can anyone confirm that it doesn’t happen if you set width to the actual width of your site, eg:

So far as I can see setting the actual width accomplishes the same thing as setting to device-width, at least for me, but if it clears up the scaling bug then obviously that is what I should go with. I would appreciate any feedback on this.

Nov 30, 2011 at 7:24 am

this was the eg:

meta name=”viewport” content=”width=480″

didn’t show because of angle brackets

Dec 2, 2011 at 11:43 am

In my further testing, I find that setting the width to an actual pixel value rather than device-width makes this scaling problem go away completely. I also find that it is hard to reproduce the scaling bug when using device-width. Oddly, it happens consistently on your own demo page, yet in my recent experiments I was able to reproduce it only once in several hundred orientation changes. This to me seems more of the nature of an odd quirk that sometimes but hardly ever happens, yet clearly on your demo page it happens consistently. The major difference between your code and my experiments is that I don’t use “initial-scale=1.0”. It seems to me that it is this that may be responsible for the ‘bug’ as a consistent event.

buy season 11 gladiator

Dec 12, 2011 at 2:45 pm

yes, its amazing work

Ryan Cannon

Dec 13, 2011 at 9:21 pm

Actually, John, setting the viewport width to exact pixels doesn’t help. Check out:

http://ryancannon.com/bugs/viewport.html

It even gets the initial scale wrong, and scales inconsistently when moving from landscape to portrait.

Jitendra Vyas

Dec 14, 2011 at 8:57 am

Third link of demo is wrong

Riad Kanane

Jan 6, 2012 at 6:15 pm

I was developing a landing page using less framework and was wondering why the iPhone wide layout wasn’t scaling correctly. I have tried your fix and it is now scaling perfectly.

Cristian Demetriad

Jan 9, 2012 at 10:57 am

That is a nice one, thank you.

Jan 9, 2012 at 10:59 am

That’s a good tehnique, thank you.

Joshua

Jan 18, 2012 at 3:02 am

This script works although it needs to be updated so (as people above pointed out) when you change orientation, it snaps back to just the viewport width.

Another point to make is that yes, setting maximum-scale=1 or user scalable=no solves this problem, even with very well designed responsive sites there will be people who will need to zoom in for some content.

There are many situations where this could be the case and you cannot design for every device. It’s just good practice to include as much accessibility in your designs as possible.

Rory

Jan 19, 2012 at 6:29 am

Well said Joshua

Gavin

Jan 24, 2012 at 1:02 am

Thanks for an awesome site, I really learn a lot from you, and the great thing is it is stuff that i can implement into my everyday use. i just have one issue with this javascript fix, all works fine until i zoom in or out, then it is basically back to square one where it act up with its usual bug…. am I the only one picking this up? am I doing something wrong?

Robert

Jan 28, 2012 at 6:17 pm

No, Gavin, your observations are correct. Read the first two comments of the authors of the script at https://gist.github.com/901295 .

Life insurance for Diabetics

Mar 12, 2012 at 9:01 am

Works perfect!!

Thanks!! :)

Monny

Mar 15, 2012 at 9:22 am

It works! :D Many thanks

air max shose

Mar 23, 2012 at 10:47 pm

http://www.mycheapmax.com/http://www.mycheapmax.com/

puzzle

Mar 25, 2012 at 5:11 am

I have a 480px width and use the following:

In potrait, why doesn’t it scale down my site? It’s still 480px width, I thought with the ‘width=device-width’ , it’s suppose to scale it down…

Any explanation is very much appreciated…thanks

sadhu

Mar 29, 2012 at 4:14 am

it doesnt work perfectly though
can open zoom one time

Mar 29, 2012 at 4:15 am

can only***** zoom one time

Toko Bunga

Apr 2, 2012 at 6:44 am

Thanks for info..i like style your writing of discription..full of info..greating..succes for you…

Rental mobil di medan

Apr 3, 2012 at 2:34 am

Thanks for info..greating..succes for you..

Objek Wisata

Apr 3, 2012 at 2:36 am

Your articel its verry good..thanks for share..see you articel again..

Holiday to Indonesia

Apr 3, 2012 at 2:37 am

good post..greating..succes for you..

Badiuzzaman

Apr 21, 2012 at 4:39 am

Same problem in my Projects, Hope this will help me to fix my view port problem.

Belitung

Apr 23, 2012 at 3:05 pm

helloo… i like your post.. full of info…

Brad

Apr 27, 2012 at 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

magazin

Apr 30, 2012 at 12:57 pm

This does look like a great theme.as

vinay

May 3, 2012 at 5:12 am

not fixing the issue

May 3, 2012 at 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.

Toko Bunga Medan

May 28, 2012 at 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 ..

Masa

Jun 7, 2012 at 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.

Nathan Deamer

Jun 17, 2012 at 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.

James Nash

Aug 6, 2012 at 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!

Vitaliy

Sep 18, 2012 at 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

Jacek

Jul 3, 2012 at 5:35 pm

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

Jimba

Jul 12, 2012 at 4:37 am

Thanks guys,

It is really helpful.

carlo

Jul 26, 2012 at 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.

Ibiza yates

Jul 29, 2012 at 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.

Chucklebot

Aug 4, 2012 at 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.

thiet ke logo

Aug 14, 2012 at 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….

Caroline

Aug 25, 2012 at 8:19 am

Still not working :( Sorry

Claus Heinrich

Aug 26, 2012 at 3:15 am

Appreciate this fix – works for me on apple devices.

Peter Wooster

Dec 4, 2012 at 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

Ana

Apr 17, 2013 at 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

Apr 17, 2013 at 6:51 pm

the meta code (sorry):

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

Afzal

May 27, 2013 at 11:56 am

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