jQuery Mobile的突破造型，因爲最小高度

正如你可以看到，當使用正確的移動設備在桌面上或加載網站視口大小，您將看到一個有三個選項的紅色框。紅色方塊是由一類飛濺所告知的紅色頁面。（我最初把這個作爲一個單獨的DIV，使用固定的位置坐在頁面的頂部，但是這在定位時有幾個問題）。

在桌面上，這工作正常，但在移動設備上，例如iPhone在工具欄消失時使用Safari和/或滾動/更改方向時會出現黑條，這是因爲由於div不佔用屏幕的全部大小，因此正在出現（jq mobile使用最小高度，即使用框架完成此操作）。

有關如何解決此問題的任何想法？還是有類似的問題？另外還注意到，在進行轉換時，他們似乎被切斷了，可能歸因於這個最小高度不能正確處理。

例子：

enter image description here

編輯：我已經改變了機身爲黑色的原因是因爲當你做翻轉的過渡，這是你所看到的後面，黑色的是正確的顏色在手機（如iPhone）上進行轉換時的背景。

2012-07-05 Cameron

除了着陸頁內容不居中，它在IE9移動版（WP 7.5）中正常工作。你能發佈你的問題的截圖嗎？這有點難以理解。 – Bojangles 2012-07-05 10:44:19

見附件。還注意到，有時從橫向切換到縱向時黑色出現在側面。 – Cameron 2012-07-05 10:48:11

您應該使用Jquery mobile增強的'listview'並將您的內容保存在DIV中，其中data-role ='content'。 jquery mobile會讓你的內容全屏。你不應該手動設計listview或其他東西。

我沒有設置圖標和您的標誌，但你會得到的想法。如果可能，請使用Jquery mobile Theme Roller進行基礎樣式，並在其上進行自定義。

編輯： 你可以在div上設置color-role =「page」的顏色。

像：

.myPage { 
    background-color:#ff0000; 
    background-image:none; 
}

而在HTML

<div data-role="page" class="myPage">

我已經更新的jsfiddle鏈接。

2012-07-05 10:58:52 Nachiket

這並沒有解決問題！由於頁面本身，而不是內容需要紅色，所以在你的例子中，我會得到相同的結果。 – Cameron 2012-07-05 11:45:36

回答