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;">

再一次，在我的最后再现它的小提琴： https://jsfiddle.net/cortical_iv/kae4q601/233/

当我进入开发人员工具并检查元素时，它会在每个浏览器中将图像显示为正确的（700px）宽度。所以浏览器都清楚地认为它们显示的是正确的大小。

在线人士建议进入Chrome设置并将页面缩放设置为100％，但我的设置已经有了。在两个浏览器中，我点击ctrl-0以确保我没有意外地放大视口。

我现在已经意识到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

Chrome正在扩展所有内容（ubuntu 16）

1 个答案: