如果浏览器宽度小于五个图像（包括边距等），我试图允许每行包含五个图像的容器更改其宽度的大小。
我添加了以下媒体查询，并且在桌面计算机上浏览时都很有效（将浏览器调整为宽度小于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;
}
}
答案 0 :(得分：13)
这可能是因为您没有设置视口。
将以下元标记放在文档的<head>元素中。
<meta name="viewport" content="width=device-width, initial-scale=1">
有关详细信息，请阅读"Using the viewport meta tag to control layout on mobile browsers " - （mdn）
答案 1 :(得分：2)
您可以使用（max-device-width：1080px）代替。它传递视口并应用于设备宽度。
答案 2 :(得分：0)
尝试一下这是我使用过的修改过的：
/* 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) {
}