Meta viewport tag seems to be ignored completely or has no effect

Question

I have put this tag in the head of a webpage:

<meta name="viewport" content="width=device-width,initial-scale=0.47,maximum-scale=1">

For some reason, it simply seems to be ignored on my iPhone, even adding user-scalable=no has no effect. I have tried many values of width, initial-scale etc... nothing seems to have any effect.

Does anyone know what might be causing this? I can see clearly in the source that it is there in the header.

My iPhone is on iOS7.

Edit: The problem is still happening on iOS6 with the xcode ios simulator, so I don't think it is due to iOS7.

Solution 1

It is working! On your page you are using:

<meta content="width=640, initial-scale=0.47, maximum-scale=1.0, user-scalable=1" name="viewport">

When I open the page on my phone (ios7 iphone5) I see exactly the right result.

Are you 100% sure you really tried putting the following in your code?

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

It doesn't get ignored.

UPDATE1

I just saw that in your code it seems you are using my second viewport but i gets changed probably by javascript to the 640px viewport. Thats maybe the reason why for you it feels like it gets ignored. Because during runtime the viewport gets changed...

UPDATE2

Ok found the problem.

function updateWidth(){
    viewport = document.querySelector("meta[name=viewport]");
    if (window.orientation == 90 || window.orientation == -90) {
        viewport.setAttribute('content', 'width=1401, initial-scale=0.34, maximum-scale=1.0, user-scalable=1');
    }
    else {
        viewport.setAttribute('content', 'width=640, initial-scale=0.47, maximum-scale=1.0, user-scalable=1');
    }
} 

Your page is calling this function which overrides your viewport. Did you know about that function?

Solution 2

I know this is a hella old question now but it was the first result in Google when I had this issue so thought I'd update in regards to iOS 10.

It seems Apple now completely overrides the user-scalable=no in iOS 10 in order to improve accessibility

See: Thomas Fuchs' Twitter Post

Solution 3

You should try, as a workaround, the following code:

html { 
    zoom: .8; 
}

Solution 4

Viewport width is different in may devices. iOS has 320, android has 360 in portrait mode. Landscape mode - it depends on which device you have, you will get different different width.

Best way to make website optimized for mobile is set width=device-width. If you don't set initial-scale=1.0 - iOs will zoom in (enlarge) screen when changing device rotation.

This meta is all you needed.

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

And if you wanted to disable the zoom feature, set user-scalable=no

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

Do not hard code width property as it will set same width for portrait and landscape modes - which is very unpleasing user experience.

Best documented: https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html

About iOs 7 Moreover I would say - dont worry about iOS7 as of now. It has so many bugs. Read here: http://www.sencha.com/blog/the-html5-scorecard-the-good-the-bad-and-the-ugly-in-ios7/

Solution 5

It seems that ios7 is not recognising the meta tag properly. Here are the links which may help you.

webapp not scaling properly in iOS 7

http://www.mobilexweb.com/blog/safari-ios7-html5-problems-apis-review

View more solutions

Comments

[waffl]

I've also tried on xcode simulator for iOS6, and it doesn't seem to work either. I've tried using it in a jsbin and that works, even on iOS7, so i'm really not sure what is causing the issue.

[waffl]

As mentioned, the viewport tag seems to have no effect whatsoever, nor do any variations on device-width, initial-scale etc. I mentioned in a comment below that I have also tried iOS6 via xcode's ios simulator to no avail either, and that a simple jsbin works fine in iOS7

[Shekhar K. Sharma]

I too have iOS 7, recently updated. and you know - belovedobjects.de looked fine on that.

[waffl]

We had to make some adjustments to the way text was breaking so that it looks 'fine', but the thing is I really can't understand why the viewport tag has no effect whatsoever.

[Shekhar K. Sharma]

What do you mean by meta has no effects? If that didnt work - your page wouldnt scale properly on mobile. I see things okay. See here

[sourav]

Can you try by adding the target-densitydpi to meta tag like this <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, target-densitydpi=device-dpi, user-scalable=0" />

[waffl]

Unfortunately no effect :( I'm really at a loss why the meta tag truly seems to be entirely ignored. Does it have anything to do with using CSS media queries?

[waffl]

It is scaled, as far as I know, due to CSS media queries. I believe there is no effect because the page looks exactly the same if I take the viewport tag out or not. Also, with the viewport tag in and user-scalable=no, the site is still zoomable/scalable.

[waffl]

Ahhhh, of course. I put that function in a year ago and completely forgot about it. Thank you so much, the only one who actually looked at the code and found the problem!

[Shekhar K. Sharma]

@andreas-daoutis: perfect catch!

[Vuong]

You saved my day! And put it into a @media block. Perfect!

[ZainZaheer06]

Can you explain it a bit more? how to use it?

[ahmednawazbutt]

Best workaround. we can use media queries to define on what scren sizes, we want this zoom property to be normal and at some specif screen size, we can make it 0.8. Perfect