Question

我正在为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'甚至被触发，它完全按照我上面的代码完成，除了第一次转弯。当我进行第一次设备旋转以改变方向时，它不会按照我的计划进行渲染。然而，当转动更多次时，它会恢复正常。只是第一次转弯因某事而失败。

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

如果有人遇到类似情况或有知识，可以在哪里遇到问题，我会非常感激。

使用JavaScript动态更新视口元时出现意外的iOS Safari行为

0 个答案: