jQuery Mobile - 切換方向時的空白區域

使用iPhone時遇到jQuery Mobile問題。當我首先加載頁面時，它的加載性能很好，但只要切換方向，它就會將空白添加到背景圖像的底部。jQuery Mobile - 切換方向時的空白區域

在方向樣式表我只是有代碼的背景圖像。任何人都知道我可以如何「修復」高度爲420px肖像和320px景觀？

謝謝。

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd"><head> 
<title>Mobile Website</title> 
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> 
<link href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" rel="stylesheet" type="text/css" /> 
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> 
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script> 

<link rel="stylesheet" media="all and (orientation:portrait)" href="css/portrait.css"> 
<link rel="stylesheet" media="all and (orientation:landscape)"href="css/landscape.css"> 

</head> 

<body> 
</body> 
</html>

來源

2011-12-12 user1016078

拿出width=device-width只是使用

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

編輯：我有這個相同的問題，並使用上述。但是，我沒有你擁有的不同的CSS。

編輯2：試試這個，擺脫2個不同的CSS文件，只使用一個沒有所有和方向的東西。然後使用我發佈的元視圖的東西。我剛剛測試過，這對我有用。無論我使用何種方向，它都會將背景圖像變爲全長。

.ui-page { 
    background: url(images/purple.jpg) no-repeat center center fixed; 
      -webkit-background-size: cover; 
      -moz-background-size: cover; 
      -o-background-size: cover; 
      background-size: cover; 
}

來源

2011-12-12 20:17:01 Bot

謝謝Jostster，但它沒有奏效。我在那裏看到你有同樣的問題。不知道爲什麼它不適合我。這很奇怪，因爲無論我首先加載它的方向，它都能正常工作。只有當我切換方向時，它纔會添加空白區域。 – user1016078

@ user1016078嘗試取出所有的CSS和東西，並在您的設備上執行緩存重置。看看這是否有效。你使用的是什麼版本的jqm？ – Bot

好吧，我越來越近了。如果我在這些樣式表中設置背景顏色，那麼它不會發生，但如果我添加一個我想要做的背景圖像，則在切換方向時會添加空白區域。我在這裏使用指南添加背景圖片http://www.roccles.com/?p=201 – user1016078

變化：

all and (orientation:portrait) 
all and (orientation:landscape)

要：

all and (max-width: 419px) <--will be used for widths less than 420px 
all and (min-width: 420px) <--will be used for widths more than or equal to 420px

下面是我用前一陣子，有噸在那裏，所以如果這不回答你所有的問題的教程只是保持谷歌搜索：http://css-tricks.com/6731-css-media-queries/

來源

2011-12-12 20:16:53 Jasper

你永遠不應該硬編碼像素。不同的設備有不同的寬度。 – Bot

取決於你想如何設計你的網站，你永遠不應該做任何事情。 – cgwebprojects

我知道很多人說，但他們說不要爲特定的寬度/設備硬編碼。將樣式表分成寬度特定的集合並不是一個壞主意，因此您的網頁在任何寬度上看起來都不錯。例如'<420px'樣式表可以使用一個列，'> 420px'樣式表可以使用兩列，並且可以指定一個具有三列的「桌面」樣式表。 – Jasper

jQuery Mobile - 切換方向時的空白區域

回答

相關問題