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.

Answer 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?

Answer 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