Question

刚刚使用jQuery Mobile启动了移动网络应用。当我将设备旋转到横向模式然后再回到纵向时，视图会陷入横向模式。我是否需要手动根据事件刷新视图或...？我目前正在测试iPhone。

/拉斯穆斯

Answer 1

如果您还没有尝试过不同的viewport代码，请尝试以下代码：

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

就您的问题而言，重要的部分是width=device-width。

- ＆GT;更新＆lt; -

以下是一个JavaScript示例，用于处理Mobile Safari未更新orientationchange上的视口宽度/高度值：

if (navigator.userAgent.match(/iPhone/i)) {
    $(window).bind('orientationchange', function(event) {
        if (window.orientation == 90 || window.orientation == -90 || window.orientation == 270) {
            $('meta[name="viewport"]').attr('content', 'height=device-width,width=device-height,initial-scale=1.0,maximum-scale=1.0');
        } else {
            $('meta[name="viewport"]').attr('content', 'height=device-height,width=device-width,initial-scale=1.0,maximum-scale=1.0');
        }
    }).trigger('orientationchange');
}

上面的代码检查navigator.userAgent字符串以查看该设备是否为iPhone。然后它将事件处理程序绑定到orientationchange事件，该事件检测设备的方向并更新视口标记以根据方向使用适当的尺寸。请注意当设备处于横向时，height如何设置为device-width。

手机旋转时，查看模式卡住了

1 个答案: