在移动和平板电脑中导航

Question

当我看到我的布局时，我正在使用固定布局 安卓平板电脑和手机的布局是打破一些 原因。

请访问http://www.iamvishal.com/pureecn/

并注意顶部导航“开放帐户，客户支持和选择语言”

在桌面上，它看起来不错，但顶部导航在移动浏览器中断开。

我怀疑它的边缘。

#main_links_list_1,#main_links_list_2,#main_links_list_3
{

 margin-right: 65px;
 position: relative;
}

Answer 1

因为你的一半布局“固定”而另一半“流畅”，所以很多东西都在破碎。 例如：

div.section {
margin-left: auto;
margin-right: auto;
width: 960px;          /*fixed*/
position: relative;
}

#main_links_container {
    float: left;
    width: 80%;       /*fluid*/
}

另请注意，如果没有为元素设置宽度，则默认为auto。

在桌面上打开您的网站并尝试调整浏览器窗口的大小，您可能会看到在移动设备和平板电脑上看到的相同问题。

如果您真的想避开媒体选择器，可以尝试更改它 -

html, body, #page {
height: 100%;
}

这样的事情 -

html, body, #page {
width: 1200px;
margin: 0 auto;
}

Answer 2

在CSS中使用媒体查询以更好地控制移动设备 -

@media screen and (max-width: 767px) {
    #main_links_list_1,#main_links_list_2,#main_links_list_3
    {
    margin-right: 15px; // reduced amount for mobile devices and tablets
    position: relative;
    }
} 

确保这低于当前的CSS，否则将被覆盖

Answer 3

有很多原因导致您的网站无法在移动设备/平板电脑上关闭。

1 ==＆gt;为非桌面创建流畅的布局 2 ==＆gt;确保您的元视口正确（包括视网膜显示和Android dpi） 3 ==＆gt;优化您的移动图像
4 ==＆gt;谨防位置：修复旧的iOs和Android设备。不能按预期工作。

你能更好地解释什么是破坏吗？

Answer 4

你错了。你需要响应式布局而不是固定！ 我建议你看看zurb foundation v4。

Answer 5

您的问题可能是因为 Professional Solutions 部分，最后一个链接很长，这会打破布局。

在你的css文件中试试这个：

#professional_solutions_list {
  max-width: 180px;
  width: 100%;
}

请参阅以下屏幕以了解我的意思（红线是您的菜单应该到达的地方，蓝线是实际的位置）：

更新

以下状态是默认状态，如平板电脑中出现问题，请注意应用的规则：

添加max-width: 180px之后，问题是已解决：

  

我使用FireBug

直播编辑css规则

编辑：

根据您的评论，我再次检查了该网站，请删除：

  

宽度：94％;

来自ID为secondary_links

的div的

Answer 6

虽然像zurb这样的响应式布局是可取的 - 快速解决方法在于应用

min-width:到页面包装器元素