jQuery Mobile导航栏未缩放到正确的大小

Question

我正在尝试jQuery在navbars上的示例，但它没有按预期工作。

在我的笔记本上加载时，导航栏尺寸非常完美。 当我在手机上试用它时，按钮会被裁剪。

这是简单的代码：

<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中的一些晦涩的bug，或者还有其他一些非常具体的问题，你以某种方式设法暴露出来。在任何一种情况下，你都可以添加应该修复它的自定义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被大量用于页面样式。但是，它不太可能需要大量的工作，或者代码重写/黑客攻击。一旦你完成它，它应该是显而易见的。