响应式/视口在浏览器中工作，但在 ios 中不工作答案

【问题标题】：responsive/viewport working in browsers but not in ios响应式/视口在浏览器中工作，但在 ios 中不工作
【发布时间】：2016-10-11 15:02:14
【问题描述】：

我觉得我疯了。

我有一个网站，媒体查询和响应行为在 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;}

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

【问题讨论】：

标签： ios css iphone responsive-design viewport

【解决方案1】：

看起来在 iOS 设备上，您的网站正在向<head> 注入一个额外的视口元标记：

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

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

祝你好运！

【讨论】：

感谢您的回答。如果您不介意，我有几个问题： 1) 我现在正在查看 Xcode iPhone 模拟器 - 我如何“使用 Safari 进行调试”？我正在查看“调试”菜单，但没有看到任何可以帮助我的东西。 2) 出于好奇，您使用什么工具帮助发现了这个额外的视口？
按照我回答中最后一个链接中的说明进行操作。基本上，一旦在 iPhone 模拟器中打开“Web Inspector”（在“设置”>“高级”下），您可以在桌面上打开 Safari，然后转到“开发”>“iPhone 模拟器”并检查您在模拟器。我这样做了，只是查看了源代码，直到我发现元标记在 iOS 上有所不同。
好的，我明白了。我以前从未这样做过，所以我没想过要在我的桌面上打开 Safari 来查看完全不同的程序中的内容。我是 Xcode 的新手。感谢您的帮助。