Html 我的@media查询不是'；t在移动设备上工作

我试图允许每行包含五个图像的容器在浏览器宽度小于五个图像（包括边距等）时更改其宽度大小

我添加了以下媒体查询，在桌面计算机上浏览时，所有这些都可以正常工作（将浏览器的宽度调整为小于1080px）…容器会改变宽度，内容会居中

然而，当在移动设备（iPhone4和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;
    }
}

---

这可能是因为您没有视口集

在文档的

元素中放置以下元标记

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

---

有关更多信息，请阅读-（mdn）

尝试一下这是我使用的经过修改的：

/* Media queries */

/* Desktop Resolutions */

/* 2k */
@media screen and (max-width: 2048px) {

}

/* 1080 HD */
@media screen and (max-width: 1920px) {



}

/* Wide SXGA/ Apple Powerbook G4 */
@media screen and (max-width: 1440px) {



}

/*  HDTV 720p/1080i monitors */
@media only screen and (max-width: 1366px) {



}

@media only screen and (max-width: 1024px)  {



}

@media only screen and (max-width: 768px)  {



}

@media only screen and (max-width: 480px) {



}

@media only screen and (max-width: 320px) {



}


/* Device Width & Density */


/* iPad Mini */
@media screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 1) {

}

/* iPad 2 and 3 Landscape */
@media (max-device-width: 1024px) and (orientation: landscape) {

}

/* iPad 2 and 3 Portrait */
@media (max-device-width: 768px) and (orientation: portrait) {

}

/* iPad 4 */
@media screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) {

}

/* iPhone 4 */
@media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {

}

/* iPhone 5 */
@media screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) {

}

/* HTC One */
@media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) {

}

/* Samsung Galaxy S2 */
@media screen and (device-width: 320px) and (device-height: 534px) and (-webkit-device-pixel-ratio: 1.5) {

}

/* Samsung Galaxy S3 */
@media screen and (device-width: 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 2) {

}

/* Samsung Galaxy S4 */
@media screen and (device-width: 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) {

}

您可以改用（最大设备宽度：1080px）。它通过视口并应用于设备宽度