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

Question

刚刚使用jQuery移动启动了一个移动web应用。当我将设备旋转到横向模式，然后又转回纵向模式时，视图停留在横向模式中。我是否需要基于事件或...手动刷新视图？我目前正在iPhone上进行测试。

/Rasmus

Answer 1

如果你还没有尝试过不同的viewport标签，试试这个：

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

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

-->更新<--

下面是一个处理Mobile Safari在orientationchange上不更新视口宽度/高度值的JavaScript示例：

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事件，该事件检测设备的方向并更新viewport标记以根据方向使用适当的尺寸。请注意，当设备处于横向时，height如何设置为device-width。