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

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

来源

2011-12-06 Black Mamba

请发表您的视口元标记，以便分析这进一步... – Leon

- - - - 我的meta标记 –

不从那里你有你的肯定，但是这是我使用，并很肯定的视口元标记它将解决你的问题：

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

UPDATE：

你将需要2个不同的视口，每个方向模式之一。 check this out了解如何在运行中更改它们。

希望这有助于

来源

2011-12-06 11:35:21 Leon

您的代码的问题在于，页面在横向模式下根本不缩放/拉伸/展开，现在我不想那样...我希望它在横向模式下展开，但当我回到纵向模式时，不会保持这种状态 –

因此，您实际上需要2个不同的视口标记，一个用于横向，另一个用于纵向... [这是一种实现此方法的方法]（http://stackoverflow.com/questions/2557801/how-do-i-reset-the进制变焦的-A-web应用程序 - 上的取向变化-ON-THE-IPHON） – Leon

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 

}

来源

2011-12-06 10:35:48 user1083202

这似乎很好......但是不是有两个样式表，我可以以某种方式访问页面缩放.... 。这是有什么想法 - 在肖像模式下，页面比例为1.0，在横向模式下为2.0 –

我有同样的问题。

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

总之，您的视口元应看起来像这样。

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

来源

2012-05-13 19:30:27 BertC

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

回答

相关问题