媒体查询在 chrome 中不起作用答案

【问题标题】：media queries not working in chrome媒体查询在 chrome 中不起作用
【发布时间】：2021-06-12 06:39:42
【问题描述】：

您好，我正在为网站实施响应式设计。尽管该设计在 Firefox 中运行良好，但在 PC 和移动设备上都无法在 chrome 中运行。样式表styles-RWD.css是这个

    /*CSS FOR MOBILE DEVICES*/

@media screen and (min-width: 0px) and (max-width: 480px) {

 #sidebar {
  display : none;
 }

 footer {
  display : none;
 }
#bann_cb {
  display : none;
 }

body {
width:auto;
background-color:white;
font-family: sans-serif;
color:orange;
margin:0px 2px 2px 2px;
padding:0;
}
#header {
display : none;
}

#content {
width:50%;
padding:0px 2px 2px 2px;
}
#box_bharat {
display:none;
}

#form {
width:auto;
padding:none;

}
#menu-bar {
width:auto;
}

#news_10 {
display:none;
}
#mob_heading {
display:block;
width:auto;
visibility:visible;
}

}
/*end css for mobile devices*/

默认样式在此之后。

index.php 有这些行

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" type="text/css" href="styles-rwd.css" />

现在这在 Firefox 中有效，但在 chrome 中无效。在 chrome 中它甚至没有触发。我在电脑上测试过。当我为 Firefox 减小浏览器窗口的大小时，会触发布局。但铬不会发生这种情况。在移动设备上也是如此。请帮忙。

【问题讨论】：

标签： css google-chrome firefox responsive-design

【解决方案1】：

Chrome 模拟器总是尝试将 946 像素的页面渲染并缩小到它所模拟的任何大小的屏幕。视口标签告诉浏览器它应该如何尝试渲染页面。 width=device-width 的行为符合您的预期，而 width=100px 可以放大所有内容。

要解决此问题，请在部分中插入元标记下方

<meta name="viewport" content="width=device-width">

【讨论】：

【解决方案2】：

// media screen only supports max-width 
@media screen and (max-width: 480px) {

}

【讨论】：

请参考？您可以使用任何有效的 css 属性作为条件。
我更正了它。即使现在它也无法在 chrome 上运行。

【解决方案3】：

对于像我即将中风一样卡住的人，请确保您没有混合元标记，您必须只使用一个。

我不小心在我的标题中组合了这两个标签：

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

删除第二个元标记似乎解决了我的@media 查询在 chrome 中不起作用的问题。

【讨论】：