CSS媒体查询不会更改设备轮换

Question

如果我使用 max-device-width 进行媒体查询，当我旋转平板电脑/手机时，媒体查询中的css不会生效，如果我刷新页面，那么正确的风格应用。

如果我将媒体查询更改为 max-width ，那么平板电脑/手机上的一切正常，但我可以看到桌面上的整个响应过程，这是我不想要的。< / p>

我使用以下元标记：

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

我的媒体查询是：

@media screen and (max-width:800px)
{
}
etc......

我尝试了以下内容：

• 调整值，799px至801px
• 堆叠最大宽度，然后是max-device-width
• 将元标记更改为仅包含设备宽度

除了max-width

之外似乎没什么用处

如何在不在桌面上显示响应过程的情况下让媒体查询生效？

干杯

Answer 1

我不确定这是否是最好的方法，但你可以复制你的css代码并在@media屏幕括号内有一个副本，而另一个副本在它之外。 e.g。

桌面{

的

.css代码

}

@media screen and（max-width：800px）{

.css code for phone/tablets etc{

}

}

桌面代码可以与仅嵌套在@media屏幕括号内的媒体代码完全相同。这是额外的代码，但它应该确保您的桌面以您希望的方式打开，而不会影响您的其他媒体设备，反之亦然。