媒体查询在 Chrome 中不起作用

Question

您好，我正在为网站实施响应式设计。虽然该设计在 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 浏览器窗口的大小时，会触发布局。但对于 Chrome 来说，这种情况不会发生。移动设备上也有同样的情况。请帮忙。

Answer 1

Chrome 模拟器总是尝试渲染 946px 页面并将其缩小到它所模拟的任何尺寸的屏幕。视口标签告诉浏览器应该如何尝试渲染页面。width=device-width 按照您期望的方式运行，而 width=100px 则会放大所有内容。

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

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