css - Chrome 正在扩展所有内容 (ubuntu 16)

Question

对于我正在构建的网页内容，我将宽度设置为 700px。奇怪的是，在我的 Firefox 浏览器 (Ubuntu 16) 上，它在我的屏幕上显示为 700px。在我的 Chrome 浏览器(版本 63)上，内容被扩展到 1125 像素。我真的不希望我的应用程序在不同的浏览器上给出如此不同的结果。

这是电影的代码:

 <video preload muted autoplay loop 
         style = "width:700px;">
   <source src="http://www.w3schools.com/html/mov_bbb.mp4"
           type="video/mp4">
 </video>

如果有人想复制它，请在这里摆弄:https://jsfiddle.net/kae4q601/232/

图像的类似代码:

 <h1> Hi I'm text how are you </h1>
 <img src="http://lifecdn.dailyburn.com/life/wp-content/uploads/2015/03/The-Nut-That-Could-Help-You-Live-Longer_2.jpg" style="width:700px; height:auto;">

再一次，一个在我这边重现它的 fiddle : https://jsfiddle.net/cortical_iv/kae4q601/233/

当我进入开发人员工具并检查元素时，它显示图像在每个浏览器中都是正确的 (700px) 宽度。因此，浏览器都清楚地认为它们显示的尺寸正确。

网上有人建议进入 Chrome 设置并将页面缩放设置为 100%，但我的已经有了该设置。在两个浏览器中，我都按下了 ctrl-0 以确保我没有意外放大视口(viewport)。

我现在意识到在 Chrome 上什至文本都更大，所以我的计算机上的 Chrome 似乎存在一般缩放问题。我的系统根本没有设置为可缩放。

Answer 1

自版本 54 起，Chrome 开始自动根据设备进行缩放。这是预期的行为，不是您可以“修复”的东西:这是他们尝试处理高密度显示器的功能。它只是自然浏览器变化的一部分，您应该只进行跨浏览器测试，以确保您的网站在目标受众的代表性设备和浏览器横截面上看起来合理。

例如，您可能需要使用 media 查询来使您的网站更具响应性，或者使用其他超出原始问题范围的响应式网站设计交易技巧(此处讨论的内容:Responsive design with media query : screen size?)。

此处讨论了 Chrome 54 的变化:
https://superuser.com/questions/1139259/how-to-adjust-ui-scaling-for-chrome