我使用 foundation/yeoman 等创建了我的婚礼网站，并将其托管在 github 上。直到几周前，所有媒体查询都运行良好(我根本没有更改任何内容或编辑我的网站)，现在它不适用于 iphone/phone 浏览器。它适用于我的 iPad，当我最小化屏幕时它适用于桌面浏览器。老实说，我已经尝试了很多东西，但无法弄清楚。
magellan 导航链接在移动设备上也不起作用...
请帮忙!提前致谢!
www.daniandjaymo.com 是网站。
这是 CSS(我在顶部有带有视口(viewport)的元标记，因为它是在您首次安装时使用基础设置的)
@media only screen and (min-width: 44.5625rem) {
.intro {
background-image: url("/images/meandjaymo5.jpg");
background-position: center center;
background-size: $background-size;
padding: 100px 0 0 0;
}
}
@media only handheld, screen and (max-width: 44.5rem) {
.intro {
background-image: url("/images/meandjaymo5-2.jpg");
background-size: cover;
background-position: center center;
padding: 100px 0 0 0;
}
}
@media only screen and (min-width: 700px){
.bridal {
padding: 10px 50px 50px 50px;
}
}
@media only screen and (max-width: 699px){
.bridal {
padding: 20px;
}
}
.to-do-boxes {
padding: 30px 25px 20px 25px;
}
@media only screen and (min-width: 1000px) {
.to-do-boxes {
width: 30%;
margin: 10px;
}
}
@media only screen and (min-width: 930px) and (max-width: 999px) {
.to-do-boxes {
width: 50%;
margin: 25px;
}
}
@media only screen and (max-width: 929px) {
.to-do-boxes {
width: 100%;
margin: 10px;
}
}
最佳答案
您的 html 应包含该行:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
关于html - 媒体查询不适用于手机(但适用于浏览器)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36135800/