css - 媒体查询不适用于手机

Question

我在自己的网站上使用自制的媒体查询。

演示: JSFIDDLE

图像示例(移动屏幕)

如您所见，它在桌面上运行良好，但我不知道为什么在移动设备上显示高分辨率。

有什么线索吗？

使用的媒体查询:

@media only screen and (max-height: 700px) {}
@media only screen and (max-width: 1023px)  {}
@media only screen and (max-width: 880px)  {}
@media only screen and (max-width: 700px)  {}

视口(viewport):

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

注意:是的，我知道我没有遵循标准，但不应该是问题所在(确定吗？)

Answer 1

我很遗憾这么说，但问题出在媒体查询语法上。

我只是忘记了结束标记“}”，所以现代浏览器可以理解它的结束位置，但移动浏览器无法理解。