同一浏览器中同一页面的不同视口宽度答案

【问题标题】：Different viewport width for the same page in the same browser同一浏览器中同一页面的不同视口宽度
【发布时间】：2017-09-18 18:12:10
【问题描述】：

如果我直接从文件系统浏览器打开页面报告不同的视口宽度，那么如果我使用简单的 python web 服务器提供它。此外，视口在另一个浏览器（经过测试的 Safari 和 Firefox）中是相同的。由于报告的宽度更大，我的内容更被挤压。为什么同一个文件有区别？

该页面上设置了此元标记

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

这里是举报行为http://recordit.co/aWwJzXxEvS的记录

【问题讨论】：

截图没有帮助；甚至没有动画的。你现在应该知道了。我们需要minimal reproducible example，或者如果您由于某种原因无法生成，至少需要一个指向实时页面的链接。
@MrLister 问题是我在不同的网络服务器上本地遇到问题。例如，如果我下载 v4-alpha.getbootstrap.com/examples/narrow-jumbotron（另存为 Chrome），然后使用“python -m SimpleHTTPServer”或“http-server”（节点包）提供该页面，我将分别获得 2100 和 1680 像素宽度的视口，这只是在 Chrome 中，FireFox 和 Safari 在两台服务器上都有 1680...

【解决方案1】：

好的，在阳光下尝试了一切之后，我想通了。

以localhost:port 身份打开页面会扰乱 Chrome 中的视口，它显然对它认为是本地的网站或其他网站使用了一些不同的逻辑。

但是使用127.0.0.1:port 在同一本地服务器上打开页面可以正常工作。

【讨论】：