0

我的网站在我的 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%

在此处输入图像描述

4

2 回答 2

2

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

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

于 2014-09-17T20:51:51.070 回答
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

于 2014-09-17T20:57:27.007 回答