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

Posted 2023-03-06

【中文标题】设置元标记视口时媒体查询不起作用

【英文标题】：media queries not working when meta tag viewport is set

【发布时间】：2016-08-10 19:58:27

【问题描述】：

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

<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 中删除元标记，那么媒体查询就完美了。

谁能告诉我为什么会这样？有什么办法可以解决？

【参考方案1】：

试试 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 中删除它。

【参考方案2】：

width 媒体特征描述了输出设备的渲染表面的宽度（例如文档窗口的宽度，或打印机上页面框的宽度）。

device-width描述了输出设备的宽度（意思是整个屏幕或页面，而不仅仅是渲染区域，比如文档窗口）。

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

因此，如果您尝试将样式更改为：

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

您可能会在您的设备上获得有效的媒体查询。