网站在手机上看起来很奇怪

Question

My website 在我的 Nexus 5 上看起来很奇怪（见下图）。虽然我无法测试，但我猜其他手机也是如此。 我想这是因为@media 查询。但是，如果我在具有不同屏幕宽度的普通电脑上尝试这个，它看起来应该是。

两个问题：

• 我该如何解决这个问题？
• 有什么方法可以在我的电脑上测试这种行为，以便我可以使用 firebug 查看 css？

这就是我的 css 文件中 @media 查询的样子：

@media (min-width: 600px) {
  .col-lg-3 {
    width: 50%;
    float: left;
  }
}

@media (min-width: 900px) {
  .col-lg-3 {
    width: 33.33%;
    float: left;
  }
}

@media (min-width: 1000px) {
  .col-lg-3 {
    width: 25%;
    float: left;
  }
}

@media (min-width: 1000px) {
  .container {
    max-width: 980px;
  }
}

.container 是带有阴影的白色框，.col-lg-3 是产品框（在正常屏幕上连续 4 个）。 .container 应在小屏幕上填满屏幕，在大屏幕上为 980 像素宽。但是，它看起来要小得多，并且看起来 .col-lg-3 的宽度为 100%

Answer 1

要详细说明@zazvomiki，您可以通过实现视口元标记并指定视口宽度应等于屏幕宽度来纠正此行为。将以下内容放在网页元素中：

<meta name="viewport" content="width=device-width, user-scalable=no">

要回答问题的第二部分，您能否在您的 PC 上测试此行为，您可以使用适用于 Android 的 Chrome 进行远程调试，它允许您使用 PC 上的开发人员工具来调查手机上的页面。然后，您可以像往常一样在 Chrome 中进行实时更改，以测试不同的想法。

Chrome 远程调试：https://developer.chrome.com/devtools/docs/remote-debugging

Answer 2

Chrome 在开发者工具中内置了非常好的移动仿真工具。见https://developer.chrome.com/devtools/docs/device-mode

子菜单 UL 也定义了宽度，因此这可能会导致菜单栏被强制比容器更宽。还要检查菜单文本的空白。