设置元标记视口时，媒体查询不起作用

Question

如果我在我的应用程序中定义视口，如下所述

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

和媒体查询如下所述

@media screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (orientation: portrait) { 
    /* Style here*/
}

然后媒体要求不起作用。但如果我从html中删除元标记，那么媒体quires就会完美无缺。

任何人都可以告诉我为什么会发生这种情况以及可以解决什么问题？

Answer 1

宽度介质功能描述了输出设备渲染表面的宽度（例如文档窗口的宽度或打印机上页面框的宽度）。

设备宽度描述输出设备的宽度（意味着整个屏幕或页面，而不仅仅是渲染区域，例如文档窗口）。

它们之间的主要区别在于设备宽度并不总是与所述设备的布局视口匹配。

所以，如果你试图改变你的风格：

@media screen 
  and (min-width: 414px) 
  and (max-width: 736px) 
  and (orientation: portrait) { 
    /* Style here*/
}

您可能会在您的设备上进行媒体查询。

Answer 2

尝试CSS：

@media only screen
  and (min-width: 414px) 
  and (max-width: 736px) 
  and (orientation: portrait) { 
        /* Style here*/
}

HTML：         <meta name="viewport" content="width=device-width, initial-scale=1"> 您的元数据已经在元标记中记录了宽度，因此请将其从CSS中删除。