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

【问题标题】：Screen Orientation Issue on Page using Jquery Mobile使用 Jquery Mobile 的页面上的屏幕方向问题
【发布时间】：2011-12-06 06:56:00
【问题描述】：

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

【问题讨论】：

请发布您的视口元标记以便进一步分析...
- - - - 我的元标记

标签： html jquery-mobile orientation

【解决方案1】：

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

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

更新：

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

希望对你有帮助

【讨论】：

您的代码的问题是页面在横向模式下根本不缩放/拉伸/展开，现在我不希望那样...我希望它在横向模式下展开但当我回到纵向模式时不要保持这种状态
所以你实际上需要 2 个不同的视口标签，一个用于横向，一个用于纵向...here's one way to do this

【解决方案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">

【讨论】：

【解决方案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

}

【讨论】：

这看起来不错....但是不是有两个样式表，我可以以某种方式访问页面比例.....这是我的想法——在纵向模式下，页面比例为 1.0在横向模式下它是 2.0