I read so much about this tag, but I'm a little confuse still. This is one of the post and here is another when I read about the subject.

What I understand is that the pages were written first with this meta tag:

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

To control how the pages are displayed on the screen of a phone. In this case I know what means every attribute.

What I don't understand is when the iOS Safari 9.0 comes, and all change to this:

<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">

If I understand correctly, this was done by safari because most of the developers did not use the meta tag viewport or something like that?, What does one thing has to do with the other?

If I'm correct, if some object in the page is greater than the viewport, then the viewport will automatically adjust its size to the big object and for that, the page will be smaller, so when I add the attibute shrink-to-fit=no I fix that problem and everything goes back to what it was like before.

This does not convince me very much, my ideas are very scattered, could anyone explain all this to me ? an why did Safari change its configuration so that all the pages have a new attribute?

I'm sorry if my English it is not the best.

  • I don't understand it either. I cant find out what the default is. I don't know if I should be using it. I have one website that uses it and another that doesnt, and I can't spot any difference in behaviour. And why is it necessary ? If I have designed a page to overflow-hidden on desktop the I want it to display that way on the mobile !!! Jun 1 at 21:44


You must log in to answer this question.

Browse other questions tagged .