【问题标题】:Chrome is scaling up all content (ubuntu 16)Chrome 正在扩展所有内容(ubuntu 16)
【发布时间】:2018-07-01 19:43:05
【问题描述】:

对于我正在构建的网页内容,我将宽度设置为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/

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

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

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

【问题讨论】:

  • 不幸的是,这似乎并没有改变它。修改问题以显示我使用开发工具检查的更多内容。而且,您的评论让我意识到我的代码中不需要所有额外的绒毛,因此简化了代码/小提琴以获得更好的 SSCCE。
  • 添加height:auto 有帮助吗?
  • @AliSheikhpour:没有变化。
  • 听起来 Chrome 只是自动将所有内容缩放 1.25 左右。我找到了一些适用于 Windows 的修复程序,但我在 Ubuntu 上。坦率地说,如果有人在高清设备上,如果我的网站是他们习惯的规模,那也不会那么糟糕。我想我只需要开发多个规模?如果我在我的机器上“修复”它,那并不意味着它对其他人来说是固定的,所以我需要使用它并将其视为自然浏览器变体。在这里讨论:howtogeek.com/278699/…

标签: css google-chrome


【解决方案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

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2013-11-14
    • 2023-02-14
    • 1970-01-01
    • 2012-08-20
    • 2011-09-28
    • 2013-02-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多