Question

我想我会失去理智。

我有一个网站（临时网址为http://dev.designersnorthwest.com，我将最终删除此网址，因为它是一个测试网站并将过期）媒体查询和响应行为在Chrome，Firefox中正常运行和Safari一样，并且在我的Android手机上测试得很好，但由于某种原因，我无法弄明白，它不适用于我测试过的几款iPhone和iPad。

要回答你的第一个问题，我的视口绝对是......

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

...我甚至尝试使用每个CSS版本来确保这不是问题。

@-wekbit-viewport{width:device-width;zoom:1;}
@-ms-viewport{width:device-width;zoom:1;}
@-o-viewport{width:device-width;zoom:1;}
@viewport{width:device-width;zoom:1;}

仍然没有骰子。我已经验证了我的媒体查询，代码看起来都不错。我在这里不知所措。任何建议都将不胜感激。

Answer 1

在iOS设备上，您的网站会在<head>中注入额外的视口元标记：

<meta name="viewport" content="width=1100">

这就是我在iPhone6模拟器上看到的内容，它可能会覆盖您的第一个视口元标记。我猜你有一个WordPress插件试图太聪明，并且只为iOS设备注入这个额外的标签。我建议您的第一步应该审核您的插件，关闭可能是罪魁祸首的任何内容，并使用free Xcode iOS simulator和debugging with Safari确认代码已经消失。

祝你好运！

响应/视口在浏览器中工作但不在ios中工作

1 个答案: