我使用Foundation/Yeoman等创建了我的婚礼网站,并在GitHub上托管。直到几周前,所有的媒体查询都能正常运行(我根本没有更改任何内容,也没有编辑我的网站),现在它在iPhone/手机浏览器上都不起作用了。它在我的iPad上起作用,当我最小化屏幕时,它在桌面浏览器上也起作用。老实说,我试过这么多东西,都想不通。
麦哲伦导航系统在移动设备上也不起作用...
请救命!提前谢谢!
www.daniandjaymo.com是网站。
这里是CSS(我有一个meta标签,上面有view port(视图端口),因为当您第一次安装它时,它是用foundation设置的)
@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">