jQuery Mobile導航欄無法縮放到正確大小

Question

我正在嘗試jQuery在導航欄上的示例，但它不能按預期工作。

將它加載到我的筆記本上時，導航欄的大小是完美的。 當我在手機上試用時，按鈕會被裁剪。

下面是簡單的代碼：

<div data-role="footer">  
    <div data-role="navbar"> 
     <ul> 
      <li><a href="#">One</a></li> 
      <li><a href="#">Two</a></li> 
      <li><a href="#">Three</a></li> 
     </ul> 
    </div><!-- /navbar --> 
</div><!-- /footer --> 

和這裏就是我得到：

難道我做錯了什麼？

Answer 1

可能是下列問題之一：

1. 您jQuery.Mobile的CSS是過時的和/或不同版本比jquery.mobile.js文件所使用。
2. 你已經添加了一些自定義的CSS某處，這是打破這一點。
3. 這是我的投票最有可能：頁面中的其他地方，您有不匹配或未關閉的標籤，並且瀏覽器正在補償它。它正在用桌面瀏覽器正確補償它（它們傾向於更好地處理格式錯誤的代碼），並且不能通過手機瀏覽器正確補償。結果是不可預知的錯誤。
4. 您的外部文件未按正確的順序鏈接。 （似乎不太可能是你的情況，除非2.此列表的也是如此）。
5. 由於.ui-content中沒有內容，所以瀏覽器沒有正確渲染。 （同樣，不太可能，但你可以嘗試添加一些Lorem Ipsum，看看是否修復它）。

如果不是上述情況，那麼要麼觸及了jquery.mobile中一些不明確的錯誤，要麼就是有一些其他非常具體的問題，您以某種方式設法公開。在這兩種情況下，你可以添加應該修復它（也許使用這個媒體查詢內將是明智的）自定義CSS：

下列情況之一的將工作：

.ui-navbar ul { 
       white-space:pre-wrap; 
       } 
// The above introduces a margin that may not be acceptable 
.ui-navbar .ui-btn-inner, .ui-navbar .ui-btn-text { 
       font-size:12px /* or something else that works */ !important; 
} 
// The above may look too small 
.ui-navbar li { 
       max-width:33%; 
       } 

上述所有可能引入在各種設備上出現問題，因此建議您調試代碼並找出造成這種情況的原因。請記住，最新的jquery.mobile版本聲稱已修復所有與視覺導航欄有關的錯誤，所以這不應該發生。以此作爲觀察的上下文，請記住可引發意外視覺缺陷的微妙錯誤的數量很多。對於jquery.mobile來說，這可能比大多數其他框架更爲真實，因爲javascript在頁面樣式中被大量使用。但是，這不可能是需要大量工作和/或代碼重寫/黑客攻擊的事情。一旦你做到了，它應該是明顯而簡單的。