Chrome 模拟器问题 |媒体查询答案

【问题标题】：Chrome Emulator Issues | Media QueriesChrome 模拟器问题 |媒体查询
【发布时间】：2015-04-09 21:14:13
【问题描述】：

我正在测试我的响应式网站，遗憾的是，当我选择“iPhone 6”等设备时，Chrome 模拟器没有显示响应式视图。令人讨厌的滚动条出现并且看起来很糟糕，但是当我调整浏览器的大小时，断点工作正常吗？

这就是我定义断点的方式 - 变量 $screen-md 设置在变量中。我正在使用 SASS。

@media screen and (min-width: $screen-md) { }

这是 Chrome 模拟器中发生的情况的屏幕截图。

【问题讨论】：

您选择设备后是否刷新过？你是否在 html 的头部使用了 viewport 元标记？
对您的两个问题都是肯定的。我在网上找到的唯一可能有帮助的是将我的媒体查询更改为最大宽度而不是最小宽度，但我认为这是垃圾......
我在一个我没有编码的新网站上遇到了类似的问题。我发现一种解决方法是在 Chrome 开发工具中，转到模拟面板（“抽屉”工具的一部分以及控制台），然后取消选中“模拟移动”。

【解决方案1】：

1) 检查 $screen-md 是否存储 375px，因为 Iphone6 是 375px 宽

2) 将最小宽度更改为最大宽度。

举例说明：

@media only screen and (min-width: 375px)  {...}

上面的代码意思是“如果[设备宽度]大于或等于[375px]，那么做{...}”

@media only screen and (max-width: 375px)  {...}

上面的代码意思是“如果[设备宽度]小于或等于[375px]，那么做{...}”

3) 我个人使用 Chrome 的经验是，即使您使用正确的视口大小，它有时也不会加载媒体查询。有几次，我不得不将最大宽度值增加 1 或 2 个像素才能使其工作。也试试吧！另外，不要忘记清除缓存并刷新页面。

【讨论】：