2

我使用的是固定布局，但是当我在 android 平板电脑和手机中看到我的布局时，布局由于某种原因而中断。

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

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

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

我怀疑这是他们的利润。

#main_links_list_1,#main_links_list_2,#main_links_list_3
{

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

6 回答 6

4

几乎所有事情都在破坏，因为您的布局有一半是“固定的”，另一半是“流动的”。例如：

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

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

另请注意，当没有为元素设置宽度时，默认值为自动。

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

如果你真的想避免使用媒体选择器，你可以尝试改变这个 -

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

对于这样的事情-

html, body, #page {
width: 1200px;
margin: 0 auto;
}
于 2013-04-12T04:44:21.050 回答
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，否则它将被覆盖

于 2013-04-06T12:43:09.953 回答
1

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

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

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

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

在此处输入图像描述

更新

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

在此处输入图像描述

而这个添加后max-width: 180px，问题就解决了：

在此处输入图像描述

我使用FireBug实时编辑 css 规则

编辑：

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

宽度：94%；

来自带有 id 的 div：secondary_links

于 2013-04-17T14:46:21.770 回答
1

您的网站在移动设备/平板电脑中关闭的原因有很多。

1 ==> 为非桌面创建流畅的布局
2 ==> 确保您的元视口正确（包括视网膜显示和 Android dpi）
3 ==> 为移动设备优化您的图像
4 ==> 小心位置：固定较旧的 iO 和 Android 设备。不能按预期工作。

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

于 2013-04-16T03:42:57.963 回答
1

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

于 2013-04-17T11:47:40.133 回答
0

尽管像 zurb 这样的响应式布局是可取的 - 快速解决方案在于应用

min-width:到您的页面包装元素

于 2013-04-17T14:10:07.280 回答