waffl waffl - 1 month ago 8
CSS Question

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

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

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?