平板电脑仿真器，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   浏览器窗口的大小，而*-device-width基于。{   屏幕大小。不幸的是一些浏览器，包括遗产   Android浏览器可能无法正确报告设备宽度   以设备像素报告屏幕大小而不是预期   视口宽度。

     

此外，使用function savedSearch(e){ if (@Html.Raw(Json.Encode(Model.ColumnA)) != "0") { applySearch1("ColumnA", @Html.Raw(Json.Encode(Model.ColumnA))); } if (@Html.Raw(Json.Encode(Model.ColumnB)) != "0") { applySearch2("ColumnB", @Html.Raw(Json.Encode(Model.ColumnB))); } if (@Html.Raw(Json.Encode(Model.ColumnC)) != "0") { applySearch3("ColumnC", @Html.Raw(Json.Encode(Model.ColumnC))); } if (@Html.Raw(Json.Encode(Model.ColumnD)) != "0") { applySearch4("ColumnD", @Html.Raw(Json.Encode(Model.ColumnD))); } if (@Html.Raw(Json.Encode(Model.ColumnE)) != "0") { applySearch5("ColumnE", @Html.Raw(Json.Encode(Model.ColumnE))); } if (@Html.Raw(Json.Encode(Model.ColumnF)) != "0") { applySearch6("ColumnF", @Html.Raw(Json.Encode(Model.ColumnF))); } } } 可能会阻止内容适应   桌面或其他允许调整窗口大小的设备，因为   查询基于实际的设备大小，而不是浏览器的大小   窗口。