html – 我的@media查询无法在移动设备上运行

我试图允许一个容器,每行容纳五个图像,如果浏览器宽度小于五个图像,包括边距等,则改变其宽度的大小.

我添加了以下媒体查询,并且在桌面计算机上浏览时都很有效(将浏览器的大小调整为宽度小于1080px)…容器更改宽度,内容居中.

但是,在移动设备(iPhone 4和S4)上浏览时,它不起作用.思考？

CSS

.main-width {
    margin: 20px auto;
    max-width: 1080px;
    min-width: 960px;
}

@media screen and (max-width: 1080px) {
    .main-width {
        max-width: 870px !important;
        min-width: 870px !important;
    }
}

最佳答案

这可能是因为您没有设置视口.

将以下元标记放在< head>中你的文件的元素.

<Meta name="viewport" content="width=device-width,initial-scale=1">

有关更多信息,请阅读“Using the viewport meta tag to control layout on mobile browsers “ – (mdn)