html - 元视口(viewport)标签似乎被完全忽略或没有效果

Question

我把这个标签放在了a webpage的头部:

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

出于某种原因，它在我的 iPhone 上似乎被忽略了，甚至添加了 user-scalable=no没有效果。我已经尝试了许多宽度值、初始比例等...似乎没有任何效果。

有谁知道这可能是什么原因造成的？我可以在源代码中清楚地看到它在标题中。

我的 iPhone 是 iOS7。

编辑:问题仍然出现在 iOS6 和 xcode ios 模拟器上，所以我不认为这是由于 iOS7。

Answer 1

它正在工作!在您使用的页面上:

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

当我在手机 (ios7 iphone5) 上打开页面时，我看到了完全正确的结果。

您是否 100% 确定您真的尝试过将以下内容放入您的代码中？

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

它不会被忽略。

更新1

我刚刚在您的代码中看到您似乎正在使用我的第二个视口(viewport)，但我可能被 javascript 更改为 640px 视口(viewport)。这也许就是为什么你觉得它被忽视的原因。因为在运行时视口(viewport)会发生变化...

更新 2

好的，找到问题了。

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');
    }
} 

您的页面正在调用此函数来覆盖您的视口(viewport)。你知道那个功能吗？