我的@media查询无法在移动设备上使用 [英] My @media queries aren't working on mobile devices
问题描述
如果浏览器宽度小于五个图片（包括边距等），我想允许每行容纳五张图片的容器更改宽度的大小。
我添加了以下媒体查询，并且在桌面计算机上浏览时（在将浏览器调整为宽度小于1080像素时），所有工作都很好...容器更改宽度，内容居中。
但是，当在移动设备（iPhone 4和S4）上浏览时，它不工作。
。 main-width {
margin：20px auto;
max-width：1080px;
min-width：960px;
}
@media screen和（max-width：1080px）{
.main-width {
max-width：870px！important;
min-width：870px！important;
}
}
可能是因为您没有设置视口。
将以下元标记放在< head> 元素。
< meta name =viewportcontent =width = device-width，initial-scale = 1>
有关详细信息，请参阅使用视口元标记控制移动浏览器上的布局 - （mdn）
I'm trying to allow a container that holds five images per row to change the size of it's width if the browser width is smaller than the five images, including the margins etc.
I've added the following media query, and all works well when browsing on a desktop computer (resizing browser to less than 1080px in width)...The container changes width and the content is centered.
However, when browsing on mobile device (iPhone 4 and S4) it doesn't work. Thoughts?
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;
}
}
This is likely because you don't have a viewport set.
Place the following meta tag in the <head> element of your document.
<meta name="viewport" content="width=device-width, initial-scale=1">
For more information, read "Using the viewport meta tag to control layout on mobile browsers " - (mdn)
这篇关于我的@media查询无法在移动设备上使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
