0

我正在导航栏上尝试 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 -->

这就是我得到的：

桌面

移动的

难道我做错了什么？

4

1 回答 1

0

可能是以下问题之一：

  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 大量用于页面样式。但是，它不太可能需要大量工作，或者代码重写/黑客攻击。一旦你明白了，它应该是显而易见的和简单的。

于 2013-05-20T16:04:01.987 回答