媒体查询不适用于手机

Question

我正在自己的网站上自制media-queries。

DEMO：JSFIDDLE

形象的例子（手机屏幕）

正如你可以看到它的工作原理上deskopt很好，但我不知道为什么在手机显示屏高分辨率。

任何线索？

媒体查询应用于：

@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) {} 

视口：

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

注：是的，我知道我没有遵守执行标准，但不应该是问题（？肯定）

Answer 1

这是一个耻辱，我说这个，但问题是在mediaqueries sintaxis。

我刚刚忘记了结尾标签“}”，所以现代浏览器了解它的结束位置，但不是移动设备。