平板电脑模拟器，CSS 移动媒体标签

Question

我正在使用此代码：

@media (min-device-width: 400px) and (max-device-width: 1020px) {

.gform_wrapper.two-column_wrapper ul.gform_fields.gform_column {float:none !important;}

}

当我在实际的平板电脑上查看网站时，代码似乎运行良好。但是，当我在平板电脑模拟器网站上查看该网站时，它不起作用。

我的语法有问题吗？

Answer 1

据我了解，模拟器不被视为“设备”，因此媒体查询不适用于它。模拟器可能会在 iFrame 中打开网站，因此将应用简单的最小/最大宽度查询。

Answer 2

改变这个：

@media (min-device-width: 400px) and (max-device-width: 1020px) {

.gform_wrapper.two-column_wrapper ul.gform_fields.gform_column {float:none !important;}

}

到这里：

@media (min-width: 400px) and (max-width: 1020px) {

.gform_wrapper.two-column_wrapper ul.gform_fields.gform_column {float:none !important;}

}

Here 是为什么：

也可以基于*-device-width; 创建查询 强烈反对这种做法。

区别很细微但非常重要：min-width 是基于 浏览器窗口的大小，而 min-device-width 基于 屏幕的大小。不幸的是，一些浏览器，包括旧版 Android 浏览器可能无法正确报告设备宽度，而是 以设备像素报告屏幕尺寸，而不是预期的 视口宽度。

此外，使用*-device-width 可以防止内容适应 允许调整窗口大小的桌面或其他设备，因为 查询是根据实际设备大小，不是浏览器大小 窗口。