CSS 媒体查询无法正常工作（布局在手机上看起来缩小了）

Question

我在我的网站中使用媒体查询进行响应式布局。现在我正在尝试使用视口宽度为 320 像素的设备。下面是我的 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">到头部