手机旋转时视图模式卡住

Question

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

/拉斯穆斯

Answer 1

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

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

至于你的问题而言最重要的部分是width=device-width。

- > UPDATE < -

以下是JavaScript例如，与移动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。