网站不会针对移动屏幕缩小答案

【问题标题】：Website does not scale down for mobile screens网站不会针对移动屏幕缩小
【发布时间】：2012-08-26 14:34:24
【问题描述】：

我正在为台式机、平板电脑和移动屏幕制作网站。为此，我使用 css 媒体查询。当我在桌面浏览器上测试我的网站时，当我缩小我的 web 浏览器时，当它达到 css 中提到的最大宽度 740px 时，它确实会改变它的布局。但问题是当我在我的手机上测试它时，它并没有改变它的布局以适应手机屏幕。

我正在使用 12 列布局系统并使用 less 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;
}

}

【问题讨论】：

标签： css less css-transitions

【解决方案1】：

尝试将其添加到 HTML 页面的顶部：

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

这应该让移动浏览器知道您以设备/浏览器大小呈现的页面，而不是伪造台式计算机的屏幕大小（从而混淆您的媒体查询）。

【讨论】：