在使用Jquery Mobile進行過渡期間停止頁面大小調整

Question

我正在構建一個需要按比例縮放至所有分辨率的電話應用程序，因此我正在按百分比定義所有內容。我也使用一個固定的標題與我在JQuery中定義的div作爲內容。

我遇到的問題是，在頁面之間的轉換過程中，由於頁面高度在轉換過程中發生更改，因此會出現'stutter'。我試圖阻止這種情況發生。有什麼想法嗎？

我在下面創建了一個示例來真正說明這一點。 http://jsfiddle.net/fz7qs/2/

<div id="pageContainer" style="position: relative !important; height: 100%;"> 
<div data-role="page" id="test1"> 

    <div data-role="header"> 
     <h1>Page Title</h1> 
    </div><!-- /header --> 

    <a id="page2link">To Page 2</a> 

    <div data-role="content">  
     <p>Page content goes here.</p>   
    </div><!-- /content --> 

    <div data-role="footer"> 
     <h4>Page Footer</h4> 
    </div><!-- /footer --> 
</div><!-- /page --> 

<div data-role="page" id="test2" style="height: 568px"> 

<div data-role="header"> 
    <h1>Page 2</h1> 
</div> 

<a id="page1link">To Page 1</a> 

<div data-role="content" style="height: 50%;"> 
    <p style="height: 80%; border: 1px solid black;">This is page 2</p>   
</div><!-- /content --> 

<div data-role="footer"> 
    <h4>Page Footer</h4> 
</div> 

Answer 1

整個的jsfiddle頁面跳轉上使用Chrome桌面瀏覽器的第一個訪問，所以按下的jsfiddle運行按鈕，使用前正確加載。

編輯：答案和jsFiddle修改每個評論部分的發展。

編輯2：jsFiddles現在使用jQuery 1.7.2使用jQuery移動1.2.0修復的Chrome瀏覽器的Bug。

jsFiddle DEMO

的解決方案是在一個CSS文件中設置您的樣式，而不是HTML部分，因爲jQuery Mobile的UI有它通過一個樣式表自己的風格主題了。

此外，您還有一個extra closing div用於該HTML底部的頁面以及不關閉網頁。您的HTML中的頭部部分對於jsFiddles不是必需的，因爲頁面設置爲HTML5，您只需要使用管理資源按鈕將文件（移動jQuery）導入到jsFiddle。

儘管您在問題中列出了完整的百分比單位，但我已將示例中的像素單位保留下來，但這些百分比也可以是百分比。

CSS設置：

a { 
cursor: hand; 
cursor: pointer;  
} 

.content1 { 
    height: 268px; 
} 

.text1 { 
    height: 50%; 
    border: 1px solid black; 
} 

.content2 { 
    height: 568px; 
} 

.text2 { 
    height: 80%; 
    border: 1px solid black; 
} 

在HTML代碼段，我也使用data-position壓住了footer到頁面的底部：

<div data-role="footer" data-position="fixed"> 

除了釘住footer到頁面的底部，您可以通過添加012的額外設置使其不具有動畫效果對於每個具有相同值的頁面的。

<div data-role="footer" data-id="foo" data-position="fixed"> 

jsFiddle FOOTER。

---

編輯2：每最近在Chrome中看到jQuery 1.8.2和jQuery Mobile 1.2.0漏洞發現（隱藏滾動條，還是引起了身體的元素跳），這裏是一個修改後的jsfiddle例如：

jsFiddle Percentage Based with jQuery 1.7.2 and jQuery Mobile 1.2.0

關於此錯誤：

我才發現，原來使用的jsfiddle使用jQuery 1.8.2和jQuery移動1.2.0當overflow說的jsfiddle內使用scrollBars功能時設定爲hidden按預期不起作用。

該函數在jQuery動畫期間隱藏瀏覽器滾動條，防止元素在頁面更改的動畫期間短暫跳轉。

瀏覽器滾動條實際上​​是隱藏的，但正文部分中的元素繼續「跳轉」，就好像滾動條仍然存在一樣。

當jsFiddle jQuery設置爲1.7.2時，不會發生這種情況。

---

如果你好奇，如何有一個頁面上的多個僞頁面，看看這個jsFiddle一個不相關的SO Answer here。

Answer 2

試圖改變這一點：

到：

<div data-role="content" style="height: auto;"> 

例如：http://jsfiddle.net/fz7qs/13/