Question

我正在开发一个响应式网站。我确信大多数手机都会使用col-xs-*尺寸，但事实证明大部分手机都使用col-sm-*。我在三个android模拟器下运行我的网站。尺寸分别为：320x240,854x480和1280x720。我想出的简单测试就是把这个div：

<div class="col-sm-6 hidden-lg hidden-md hidden-xs" style="background-color: black; height: 200px"></div>

网页上的某个地方。正如您所看到的，它应仅显示sm设备分辨率，实际上它是，但我不明白为什么。这些仿真器中的每一个都具有宽度<1。 768px所以我认为它不会显示。

问题是：为什么会这样？

修改

越来越多的怀疑:)。我找到了这个网站：https://getbootstrap.com/examples/grid/，其中指出The Bootstrap 3 grid system has four tiers of classes: xs (phones), sm (tablets), md (desktops), and lg (larger desktops).让我更加困惑。哪种手机的尺寸为xs？

修改

当我将此代码放在我的网页底部时：

<script type="text/javascript">
    (function() {
        alert(window.innerWidth);
    })();
</script>

我为每个模拟器获得了值980。如果我尝试使用开发人员工具（可以选择切换到移动视图）在chrome（桌面）下测试我的网页，情况也是如此。

Answer 1

好的，对于后代 - 我在这里找到了答案：Why is my Android device-width 980px?让我能够正常使用。如果该问题已被删除或smth - 请将其添加到您的<head>：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

何时使用bootstrapcss col-xs- *？

1 个答案: