1

我正在为 iPhone iOS Safari 浏览器改编一个网站。由于我希望内容在两个设备方向上都占据整个视口，因此我正在对meta[name='viewport']标签进行动态更新。

这是我在里面默认设置的meta[name='viewport']：

<meta name="viewport" content="width=device-width, initial-scale=0.51, minimum-scale=0.51, maximum-scale=0.51" />

然后，在页面加载后，我正在执行以下 JavaScript 代码以确保整个视口都被网站占用并居中：

var viewport = $("html head meta[name='viewport']");

function switchViewport() {
    var wider = "0.765",
        shorter = "0.51";

    switch (window.orientation) {  
        case 0:  
        case 180:
            viewport.attr("content", "width=device-width, initial-scale=" + wider + ", minimum-scale=" + wider + ", maximum-scale=" + wider + "");
        break; 

        case -90:  
        case 90:  
            viewport.attr("content", "width=device-width, initial-scale=" + shorter + ", minimum-scale=" + shorter + ", maximum-scale=" + shorter + "");
        break;
    }
}

$(window).on("orientationchange", switchViewport);

switchViewport();

当我在真正的 iPhone（4、4S）上测试试图旋转设备时，甚至会触发“onorientationchange”，它完全符合我对上面代码的期望，除了 first turn。当我进行第一次设备旋转以改变方向时，它没有按我的计划呈现。但是，当转动更多次时，它会恢复正常。只是因为某些事情，第一回合失败了。

这是一个网站： http: //goo.gl/VXyBg我正在研究，所以你可以直接用你的真 iPhone 或模拟器进行测试。更好的真实，因为模拟器在这种特殊情况下与真实设备相比没有给出相同的结果。

如果有人面临类似情况或对问题所在有知识和经验，我将不胜感激。

4

0 回答 0