使用Jquery Mobile在页面上的屏幕方向问题

Question

我刚刚开始研究移动网络应用程序，我正在使用Jquery Mobile制作HTML5页面。我在iPhone和iPhone上测试了我的页面iPad兼容。问题是，当我从纵向更改为横向，然后从横向更改为纵向模式时，我的页面仍会放大。   在n次方向改变之后，无论方向如何，我如何恢复到最佳缩放级别。我在元标记中使用了设备宽度，设备高度，设备密度

Answer 1

不确定从哪里获得你的，但这是我正在使用的视口元标记，我很确定它会解决你的问题：

<meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"  />

更新：

您需要2个不同的视口，每个方向模式一个。 check this out了解如何动态更改它们。

希望这有帮助

Answer 2

我有同样的问题。

这篇文章回答了你的问题： JQuery Mobile Beta 1 is not resizing the screen on iphone when rotated to landscape 虽然我不使用Beta但版本1.1.0，但应用了该解决方案。

简而言之，您的Viewport Meta应该如下所示。

<meta name="viewport" content="initial-scale=1, maximum-scale=1">

Answer 3

This may be helpful for you, mantain two stylesheets in landscape and portrait mode 

 window.onorientationchange=detectIPadOrientation;

function detectIPadOrientation()
{
    //check for the mode and apply the appropriate style sheet,window.onorientationchange is the method will be called whenever the orientation changes

}