Html 我的@media查询不是';t在移动设备上工作
我试图允许每行包含五个图像的容器在浏览器宽度小于五个图像(包括边距等)时更改其宽度大小 我添加了以下媒体查询,在桌面计算机上浏览时,所有这些都可以正常工作(将浏览器的宽度调整为小于1080px)…容器会改变宽度,内容会居中 然而,当在移动设备(iPhone4和S4)上浏览时,它不起作用。想法 CSSHtml 我的@media查询不是';t在移动设备上工作,html,css,Html,Css,我试图允许每行包含五个图像的容器在浏览器宽度小于五个图像(包括边距等)时更改其宽度大小 我添加了以下媒体查询,在桌面计算机上浏览时,所有这些都可以正常工作(将浏览器的宽度调整为小于1080px)…容器会改变宽度,内容会居中 然而,当在移动设备(iPhone4和S4)上浏览时,它不起作用。想法 CSS .main-width { margin: 20px auto; max-width: 1080px; min-width: 960px; } @media screen
.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)。它通过视口并应用于设备宽度