If you’re doing responsive design, you’re using viewport <meta> tags. These tell the browser what width it should render the viewport at. If you don’t use this tag, it will render at the device’s default, which almost certainly isn’t what you want. But even if you are using viewport <meta>, there are subtle differences in the value you put in it.
I just wanna focus on one little difference here.
I’ve used this one primarily for as long as I’ve been doing responsive design:
<meta name="viewport" content="width=device-width">Which means “browser, render this website exactly as wide as you are naturally.”
If we look at iPhones, the 1-5 are 320px wide. The 6 is 375px wide, the 6+ is 414px wide. There are a zillion other devices out there, and they have a huge variety of viewport widths. That meta tag will tell them all to render as wide as they are. Great.
Using that tag exactly as-is above, the iPhone exhibits this weird zooming behavior when rotating the landscape:
Enter the initial-scale value! If you do this instead:
<meta name="viewport" content="width=device-width, initial-scale=1">It keeps the same zoom:
Better, says I.
I wouldn’t doubt that initial-scale fixes other bugs too. I didn’t test it on a huge device lab or anything. That would be pretty darn interesting though. Let me know if you know of any deeper details.
And while initial-scale=1 is pretty useful, maximum-scale is bad news for accessibility.
I already do this!
Awesome. You’re way ahead of me. A lot of snippets out there include this, which is great. I might have even removed it once and didn’t notice anything bad immediately so kept it that way. I’m just dumb like that.
Remember you need more than meta tags
IE 10 in Snap Mode and Windows Phone 8 need @viewport stuff in the CSS, so remember to use this stuff.
Great. But what if the visit (for some reason) begins with landscape? Then what happens? Anything undesired?
As far as I know there should be no problem when starting in landscape.
Is there are difference between 1.0 and 1?
Nope
I also think its bad for accessibility to put change the
user-scalableattribute also.For an awesome video on why responsive web design works (technically)…and for a deep dive into viewports give this video a watch…
Also the book Mobile Web Handbook goes into the technicalities of why the viewport meta tag works…
https://shop.smashingmagazine.com/mobile-web-handbook.html
I found the video and the book a good insight into the world of mobile viewports…
In addition to
I also add this in CSS:
This prevents the text from enlarging. Worked out great so far. Source: https://developer.mozilla.org/en-US/docs/Web/CSS/text-size-adjust
When you absolutely, positively got to kill every scaling factor in the room. Accept no substitutes.
I had a long discussion on this last year and I did some tests which showed that not using initial-scale=1 was bad in almost all examples that I could think of.
The results are here:
http://community.sitepoint.com/t/mobile-viewport-orientations-initial-scale-1-0/38495/11
(Apologies for the off site link).
Without initial scale you get the zooming bug in rotation(and sometimes compounded effects on double rotation) and media queries for the landscape mode being ignored. No such problems occur when the initial scale=1 is added.
this is what i use from a while
I hate sites that do this
This is the dangerous one where ALL ZOOMING IS PREVENTED – which is widely regarded as bad for accessibility. People can’t zoom to read better. You can’t zoom in on images to see things more clearly. Both obnoxious and bad for a11y.
For regular content-based websites setting user-scalable=no is usually a bad idea, yeah. However if you are developing a web app with complex UIs its often desirable to do this, especially if you aiming for a more native app type experience.
shouldn’t we create websites where users don’t need to zoom in to read better? isn’t this what responsive web design is here for?
We should not presume we know what users want.
What if someone wants or needs to zoom in on an image? I think it’s extremely risk and almost always a mistake to make blanket assumptions about what every single user will want or need to do with your website. Taking away the ability to zoom is super annoying and just bad practice, IMO.
Why not design your site so that it doesn’t matter if someone wants to zoom (or just don’t even worry about that at all)?
you’re right. it does no harm to let the user be able to zoom as it doesnt interfere with the page rendering. thanks for the advice ;)
How do you as a designer ascertain that your visitor doesn’t need to zoom?
I also use maximum-scale. But i didn’t know what this is all about. But I understand something new. But this look more newer then maximum-scale=1, I use 1.0. What is user-scable then?
You people are ignorant by saying that "people can’t zoom to read better" when you set the viewport content attribute to
"width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no".On iOS, Windows Phone and Android, the user can go into accessibility settings and use the "Zoom" or "Magnifier" tool to read the text better. And on desktop, the user can use Ctrl+ to zoom the site in.
The importance of setting the viewport content attribute to
"width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no"is especially prevalent in my site, ProfessedTechnology. Without it, the site would look completely ridiculous! For example, with only"width=device-width"on iPhone the site would look completely normal in portrait mode, but in landscape it would be zoomed in 3 fold! And with only"initial-scale=1.0, maximum-scale=1", the same effect would occur on Windows Phone! And moreover, without"user-scalable=no"you can zoom in, but it looks so stupid because it zooms in on a specific area and it looks silly!The moral of the story is, some sites should be of fixed zoom and some sites should not, it’s all determined by the site’s design. If users really need to zoom in on text, they can use the OS’s accessibility tools! They are there for a reason!
CLARIFICATION: I’m sorry if I came off self promoting in my comment, I was really tired when I wrote it. Secondly, I know the accessibility tools are absolute garbage, but remember, pinch-to-zoom in on a web page is a functionality feature promoted by Apple, so stating that disabling zoom is bad for accessibility isn’t a completely solid argument. The zoom and magnifier tools are there for accessibility, not the pinch-to-zoom feature.
This is good for forms. It’s annoying when you’re on mobile and you click in a form and it zooms you in. However, it’s not good practice to disable image zooming. So, how do you stop the annoying zooming on forms without preventing users from zooming on images?
Andrew,
Removing user scale does indeed open mobile OS’s to scaling up/zooming when an input field is in focus. There are a host of solutions for that which can be found in this Stack Overflow thread: http://stackoverflow.com/questions/2989263/disable-auto-zoom-in-input-text-tag-safari-on-iphone
The TL;DR is setting the font size to 16px, or more ideally 1em if that will = 16px, prevents most mobile browsers from zooming in. This worked on one of my recent sites.
I will hunt you down… :) seriously, don’t do it. I have bad eyesight and I need to zoom in to be able to read the text!
@Valerio: user-scalable=no
Please don’t stop me from zooming on my phone. I just can’t read it otherwise ;)
I’ve have used the initial-scale=1 meta for ages. But I had no idea that a css fix was required for IE10 and Windows phones.
Come on IE — play the game. You’re supposed to be a ‘modern’ browser!
Cheers
I
The @viewport rule is the standard, not the meta tag. The meta tag was introduced by Apple along with the first iPhone, and has become a sort of defacto “standard”, but IE is actually the forward-thinking one here.
I have never notice the scaling on iOS devices to be honest.
Maybe I have been doing it wrong all the time or maybe it’s because I always set a default body font-size en increase/decrease this value based on Media Queries.
This is life changing! haha, thank you!
IMHO this article has wrong title, it should be “Fixing iPhone browser rotate bug” :)
Good to know though :)
No it shouldn’t! Apple’s documentation on this specifically says to do it like this, and not to use device-width.
In fact, it proves my point exactly :)
How much is this article relevant outside the world of certain Apple devices?
Are there any possible side effects in other test cases on completely different devices?
It kinda assumes that Mobile Safari/WebKit is the standard and the rest should be in line with it. We had this situation and called it IE6 :)
I don’t have any links or data on this just yet, but I’m fairly certain this fixes bugs outside of iOS. I think the bug was webkit-related, which has wider reach.
Does anyone have a use case for requiring maximum-scale=1?
Some people provided examples to say that it’s bad because your users cannot zoom in on images. Well, if you are making a responsive website and your users need to zoom to read the text or pictures, then probably you need to reconsider if you are doing things right. ;-)
Take CSS-tricks for example. There is no need to zoom in anywhere. Codepen, on the other hand, is completely not responsive and thus requires zooming.
At the time I wrote this a couple of years back – https://alwaystwisted.com/articles/2013-01-10-dont-do-this-in-responsive-web-development – basically bemoaning asshats that set maximum scale so there’s no opportunity to zoom.
I also happened on a bug with Windows 8 (not 8.1) unless you included initial scale. Being two years ago and seeing
I stupidly didn’t document it in my article. I can for the lif of me remember why I kept it and keep on having it in my html.
I have used ‘meta name=”viewport” content=”initial-scale=1″‘ for some time now.
Adding “width=device-width” seems redundant at best and I am not aware of any problems the omission would cause. (Feel free to correct me!)
The “Zoom-Bug” is intentional as far as I remember. device-width ist just always the portrait-orientation-width and doesn’t change, when you rotate or first load pages in landscape (so for iPhone up to 5 it’s always device-width=320px).
Chris,
It looks like CSS Tricks is still using
Is there a reason for that?
Thanks for the article!
I wanted to do testing before I just up and changed it. CSS-Tricks does exhibit the zooming in, but the space fills out OK. I’m sure next time I revisit some design stuff around here I’ll get to that.
Ok that was my guess. Incidentally, it looks like I’ve been using initial-scale=1 for a couple years; so far, so good. Unfortunately no time or budget for device lab testing, though. :)
I ALWAYS use initial-scale=1 and this has fixed more issues than I could even count! Not just Apple devices but a lot of IE issues end up getting resolved too.
on the flip side: I NEVER prevent user zooming. One of my supervisors has sight issues and doesn’t let me push anything to production until he’s tested the zoom factor. We have had a few conversations about how this means the site is not actually going to always look fantastic, though. It’s important to him that he is permitted to zoom; it’s important to me that he doesn’t see my work as inferior because I didn’t plan on a 3000% zoom for the page. ^_^
Found something cool that is going to be part of my css reset.
This will prevent Safari iOS from zooming in on your iPad or iPhone when pressing an input field. Often you see this happen when developers place an search-field inside a mobile friendly menu. You hit the search field and bang, you site breaks out of it’s pretty canvas.