使用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的頁面上的屏幕方向問題

回答

相關問題