我正在为桌面、平板电脑和移动屏幕制作一个网络。为此，我使用css媒体查询。当我在桌面浏览器上测试我的网站时，当我缩小我的网页浏览器时，当它达到css中提到的最大宽度740px时，它确实会改变布局。但问题是，当我在手机上测试它时，它并没有改变布局以适应手机屏幕。
我使用12列布局系统，并使用较少的css。请帮助我为什么它不改变其在手机上的布局以适应手机屏幕。
这是我的css或更少的css，准确地说是
html, body {
height: 100%;
//overflow: hidden;
}
body {
min-width: 360px;
background-color: #ffffff;
#page {
width: 100%;
height: 100%;
overflow: auto;
}
.right {
position: relative;
right: 0;
}
// Extend column system (from defaults/layout.css)
.row {
clear: both;
> .container {
max-width: 1024px;
margin: 0 auto;
padding: 0 2% 0 2%;
.container {
max-width: 100%;
padding-left: 0;
padding-right: 0;
&.one {
width: 8%;
}
&.two {
width: 16%;
}
&.three {
width: 25%;
}
&.four {
width: 33%;
}
&.five {
width: 41%;
}
&.six {
width: 50%;
}
&.seven {
width: 58%;
}
&.eight {
width: 66%;
}
&.nine {
width: 75%;
}
&.ten {
width: 83%;
}
&.eleven {
width: 91%;
}
&.twelve {
width: 100%;
}
}
}
}
}
/*Collapse columns*/
@media only screen and (max-width: 740px) {
.column, .column.one, .column.two, .column.three, .column.four, .column.five, .column.six, .column.eight, .column.nine, .column.ten, .column.eleven, .column.twelve,
.column.close-right, .column.one.close-right, .column.two.close-right, .column.three.close-right, .column.four.close-right, .column.five.close-right, .column.six.close-right, .column.eight.close-right, .column.nine.close-right, .column.ten.close-right, .column.eleven.close-right, .column.twelve.close-right {
//width: auto;
//float: none;
//clear: both;
margin-right: 0;
}
.column.third {
display: none;
}
.column.second {
width: 77%;
}
.column.first {
//min-width: 180px;
}
}
尝试将其添加到HTML页面的顶部：
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
这应该让移动浏览器知道，你的页面是以你的设备/浏览器的大小呈现的，而不是伪造台式电脑的屏幕大小（从而混淆你的媒体查询）。
http://www.allenpike.com/2010/choosing-a-viewport-for-ipad-sites/