我的@media查询不适用于移动设备
我试图让一个容器，每行包含五个图像来改变它的宽度的大小，如果浏览器宽度小于五个图像，包括边距等。
我已经添加了下面的媒体查询，并且在桌面计算机上浏览时（浏览器的宽度小于1080像素），所有这些都可以正常工作…容器更改宽度，内容居中。
但是，在移动设备（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">
有关更多信息，请阅读“使用视口元标记控制移动浏览器的布局” – （mdn）
您可以使用（最大设备宽度：1080px）。 它通过视口并适用于设备宽度。
试试这个是我使用的一个修改过的：
/* 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) { }
