2

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

}
4

2 回答 2

3

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

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

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

于 2012-08-26T06:06:27.043 回答
1

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

于 2012-08-26T06:03:55.153 回答