responsive/viewport 在浏览器中工作，但在 ios 中不工作

Question

我想我疯了。

我有一个网站，其媒体查询和响应行为在 Chrome、Firefox 和 Safari 中调整大小时工作正常，并且在我的 Android phone 上测试正常，但出于某种我无法弄清楚的原因，它不适用于几款 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 and debugging with Safari.

确认标签已消失

祝你好运！

responsive/viewport 在浏览器中工作，但在 ios 中不工作

responsive/viewport working in browsers but not in ios

css

iphone

viewport

ios

responsive-design