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

Question

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

两个问题：

• 我该如何解决这个问题？
• 有没有办法可以在我的电脑上测试这种行为，所以我可以用firebug来查看css吗？

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

@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应该在小屏幕上填满屏幕，在大屏幕上宽980px。但是，它看起来要小得多，看起来.col-lg-3的宽度为100％

Answer 1

Chrome为开发人员工具内置的移动设备提供了非常好的仿真工具。见https://developer.chrome.com/devtools/docs/device-mode

子菜单UL也定义了宽度，因此这可能导致菜单栏被强制扩大到容器。检查菜单文本的空白区域。

Answer 2

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

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

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

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