Question

当我在iPhone上查看www.americaspoeticsoul.com时，菜单因某种原因而溢出。参见：

Menu overflows on iPhone

由于标题：

，它甚至在其他页面上看起来最糟糕

Worst on other pages - overflows over the header

任何人都知道为什么会这样吗？有没有办法解决它？这是菜单的CSS：

/*Menu*/

#menu {
    margin-bottom:15px;
    width:450px;
}

#menu ul { /* remove bullets and list indents */
    list-style: none;
    margin: 0;
    padding: 0;
}

#menu ul li {
    float:left;
}

#menu ul li a {
    display:block;
    padding:10px;
    margin:2px;
    background-color:#D41C1C;
    text-decoration:none;
    font-weight:bold;
    font-size:15px;
    color:white;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    -o-border-radius:10px;
    border-radius:10px;
}

#menu ul li a:hover {
    display:block;
    padding:10px;
    margin:2px;
    background-color:#FF1C1C;
    text-decoration:none;
    font-weight:bold;
    font-size:15px;
    color:white;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    -o-border-radius:10px;
    border-radius:10px;
}

#menu ul li a.current_link {
    display:block;
    padding:10px;
    margin:2px;
    background-color:#FF1C1C;
    text-decoration:none;
    font-weight:bold;
    font-size:15px;
    color:white;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    -o-border-radius:10px;
    border-radius:10px;
}

谢谢，

森

Answer 1

作为一名iPhone用户和开发者 - 我不会在手机上使用像你这样的网站，除非我真的必须 - 在我阅读或点击之前需要进行各种放大那个菜单。

如果您想通过iPhone上的菜单提供内容，我建议您至少检测小屏移动浏览器并将其重定向到移动专用菜单 - jQuery Mobile 所以< / em>易于使用来创建菜单。

这只是关于iPhone或类似尺寸屏幕的回复 - 我相信如果它看起来一样，你想在iPad上解决这个问题。

Answer 2

您没有在菜单项上设置明确的宽度，这使得它们的宽度受浏览器的支配以及字体大小+边距和填充的最大程度。对于移动浏览器（Android也是如此），你的宽度对于450px来说太大了。尝试将字体大小丢弃一点或者什么。

Answer 3

您可以尝试将其添加到CSS文件中：

html {-webkit-text-size-adjust：none; -MS-文字大小调整：无; }

这将阻止Mobile Safari（和Windows Phone）调整文本大小，以使其更具可读性。

编辑：如果您只想影响手机上的文字大小调整，可以使用媒体查询：

@media screen and (max-device-width: 480px) {

  html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; }
}

如果您有野心，那么您应该考虑在更小的屏幕尺寸上调整布局。您放入该媒体查询的任何CSS都将应用于屏幕大小为480px或更小的设备。

例如，按钮可能有点太小，手指无法可靠地敲击它们。更好的选择是线性化布局，以便只有一列，每个链接按钮占据屏幕的整个宽度。

Answer 4

您发现在菜单系统中依赖文本/字体的缺点之一。有太多的可变性（操作系统，浏览器，设备等），以期望文本始终正常运行，甚至使用您想要的字体。

我使用图形创建的菜单系统，无论如何都不会改变，页脚中的简单文本菜单作为后备。

当我在iPhone上查看时，我的网站菜单看起来不正确

4 个答案: