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

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

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

<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