Question

我正在尝试使用ruby on rails建立一个网站，它将在不同的屏幕尺寸上具有不同的样式。我正在使用materializecss这样做。

面对以下问题：

<div class="row">
  <div class="col m2 l3 blank"></div>
  <div class="col s12 m8 l6 yield">
    <%= yield %>
  </div>
  <div class="col m2 l3 blank"></div>
</div>

'div blank'表示'div yield'左侧的空白区域

我希望div.yield为大屏幕（笔记本电脑）占50％的屏幕，中等屏幕（平板电脑）为66％，小屏幕（手机）为100％屏幕

当我在dekstop上的Chrome浏览器上测试时，我得到了理想的结果。在窗口大小调整时，'div yield'在宽度<600px时采用100％屏幕尺寸，在宽度上采用50％＆gt; 992px。

到目前为止一切都很好。

但是当我切换到铬的移动仿真模式时，'div yield'不接受宽度<600px的s12类，而是为宽度<600px服务m8类。

以下是两个结果的屏幕截图

左边一个是普通模式下的铬浏览器，宽度减少到357px。（这是我想要的结果

右侧是移动仿真模式下的铬浏览器，宽度设置为357px。在这个m8类中，而不是类s12。（不想要）

screenshot

为什么会发生这种情况，以及如何解决？

1 个答案:

答案 0 :(得分：8)

Answer 1

我只是看了一下您的链接，问题是移动设备的实际屏幕宽度不一定与布局视口的宽度相匹配。因此，例如在iPhone的情况下，它为每个“css像素”使用2个屏幕像素，有效地使您的媒体查询“相信”屏幕宽度为750像素（嗯，实际上，您只是希望这些像素是独立的的设备）。这就是为什么它不选择小网格尺寸。您必须指示页面与设备无关的像素中的屏幕宽度匹配，并且使用viewport元标记的简单方法是这样做。因此，如果您将以下内容添加到<head>，则响应式设计会按预期运行：

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

物化网格s12在移动视图中不起作用

1 个答案: