媒体查询在手机上不起作用（但它在浏览器上起作用）

Question

我使用 Foundation/yeoman 等创建了我的婚礼网站，并将其托管在 github 上。直到几周前，所有媒体查询都运行良好（我根本没有更改任何内容或编辑我的网站），现在它不适用于 iphone/手机浏览器。它适用于我的 iPad，当我最小化屏幕时它适用于桌面浏览器。老实说，我尝试了很多事情，但无法弄清楚。

magellan 导航链接也无法在移动设备上运行...

请帮忙！提前谢谢！

www.daniandjaymo.com 是网站。

这是 CSS（我在顶部有带有视口的元标记，因为它是在您第一次安装时设置的基础）

@media only screen and (min-width: 44.5625rem) { 。介绍 { 背景图像：url（“/images/meandjaymo5.jpg”）； 背景位置：中心中心； 背景尺寸：$背景尺寸； 填充：100px 0 0 0； } } @media 仅限手持设备、屏幕和（最大宽度：44.5rem）{ 。介绍 { 背景图像：url（“/images/meandjaymo5-2.jpg”）； 背景尺寸：封面； 背景位置：中心中心； 填充：100px 0 0 0； } } @media only screen and (min-width: 700px){ .新娘{ 填充：10px 50px 50px 50px； } } @media only screen and (max-width: 699px){ .新娘{ 填充：20px； } } .to-do-boxes { 填充：30px 25px 20px 25px； } @media only screen and (min-width: 1000px) { .to-do-boxes { 宽度：30%； 边距：10px； } } @media only screen and (min-width: 930px) and (max-width: 999px) { .to-do-boxes { 宽度：50%； 边距：25px； } } @media only screen and (max-width: 929px) { .to-do-boxes { 宽度：100%； 边距：10px； } }

Answer 1

您的 html 应包含该行：

<meta name="viewport" content="width=device-width, initial-scale=1.0">