Question

我正在为桌面，平板电脑和移动屏幕制作网页。为此我使用css媒体查询。当我在桌面浏览器上测试我的网站时，当我向下扩展我的web bowser时，它会在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;
}

}

Answer 1

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

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

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

Answer 2

http://www.allenpike.com/2010/choosing-a-viewport-for-ipad-sites/

网站不会缩小手机屏幕

2 个答案: