CSS 媒体查询无法正常工作（布局在移动设备上看起来缩小了 phone）

Question

我在网站中使用媒体查询进行响应式布局。现在我正在尝试使用视口宽度为 320px 的设备。下面是我的 CSS 代码：

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */

#wrapper,#white-board,#content {
width:400px;
}
#slot {
width:370px;
}

#logo {
width:100px;
}
#top-bar-content,#nav-bar-tile,#card,#fourth-box,
#eighth-box-wrapper,#eighth-box,#ninth-box-wrapper,
#ninth-box,#seventh-box-wrapper,#seventh-box,#fifth-sixth,#sixth-box,#ad_long ,#sidebar {
display:none;
}

}

这是它的样子：

这是我放大时的样子，这就是我真正想要的布局：

Answer 1

将<meta name="viewport" content="initial-scale=1.0">添加到头部

Answer 2

尝试在您的 :

中添加视口元

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">

Answer 3

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

CSS 媒体查询无法正常工作（布局在移动设备上看起来缩小了 phone）

CSS media queries not working properly (layout looks zoomed out on mobile phone)

css

media-queries

responsive-design