Kube CSS网格在移动设备上无响应

Question

我正在使用Kube CSS框架，并且在响应网格方面遇到了麻烦。

我有这样的html，取自这里的第一个示例

<body>

  <div class="units-row">
      <div class="unit-50">Hello world</div>
      <div class="unit-50">It's Kube Grid System</div>
  </div>

  <style>
    .unit-50 {
      text-align: center;
      background-color: purple;
      color: white;
      padding: 2em;
    }
  </style>

</body>

页面渲染器与桌面上的示例相同

桌面上的页面

问题是当我在移动设备上时。 当我在Kube网格示例上打开chrome dev工具时，列会响应，并且宽度为100％。

响应式

这是我的网页在移动设备上的样子

我的手机

在Kubes网格示例中，当我的屏幕宽度为375px时，好像我的屏幕宽度大于900px。 我没有正在加载的任何外部CSS会对此进行修改。

我知道我的网站仍然可以响应，因为当我调整浏览器窗口的大小时，列的宽度确实达到了100％。

响应式地雷

由于某些原因，我的屏幕宽度比Kube CSS网站高得多。 我是否需要做任何事情来使我的页面具有这种行为？

这看起来确实应该让我感到困惑。

Answer 1

因此，经过数小时的谷歌搜索（请注意，您可能只需要花费几分钟搜索正确的内容），就可以将此meta标签放在文档的开头

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

将使网格在移动设备上响应

Kube CSS网格在移动设备上无响应

问题描述

1 个解决方案

解决方案1
1 已采纳 2015-09-27 00:29:03

Kube CSS网格在移动设备上无响应

问题描述

1 个解决方案

解决方案1 1 已采纳 2015-09-27 00:29:03

解决方案1
1 已采纳 2015-09-27 00:29:03