时间戳

首页 > 解决方案 > 浏览器视口宽度是否始终取决于 Windows 10 缩放设置？

windows - 浏览器视口宽度是否始终取决于 Windows 10 缩放设置？

问题描述

对于在 Windows 10 v1909 中的 Chrome 上显示的网站，当视口元标记的值设置为时，网站的视口宽度是否总是根据 Windows 10 的缩放和布局设置（在设置>显示>缩放和布局中找到）的值而变化？widthdevice-width

我刚买了一台新的 3840 x 2160 4K 超高清 (UHD) 显示器，认为我设计的网站将以 3840 像素宽显示。 但是，当我使用 Chrome 的开发人员工具检查标题元素时，视口的宽度会随着我将 Windows 10 缩放得更高而变小。 而且因为我无法读取此 4K UHD 显示器上显示的任何 3840 像素宽的文本（当 Windows 10 缩放设置为 100% 时会发生这种情况），我已将 Windows 10 缩放比例增加到 175%，以便我可以阅读舒适地发短信。 但是当我增加 Windows 10 的缩放比例时，我的浏览器的视口宽度会缩小（例如，在 175% 的 Windows 10 缩放比例时，我的浏览器视口的宽度是 2195 像素）。我做了一些实验，以下是与特定 Windows 10 缩放值相关联的浏览器视口宽度：

我发布这个问题的原因是为了让我了解在为 4K 网站设计时需要制作图像的尺寸。我使用 Avada WordPress 主题来设计我所有的客户网站。他们对设计 4K 网站的建议是：

“作为一般规则，我们目前在演示中使用 2000 像素宽的图像，这些图像通常足够大，可以使图像在所有常见的屏幕尺寸上看起来都很棒。”

查看上面列出的 Windows 10 缩放和浏览器视口值表，似乎 Avada 的图像宽度建议仅适用于 4K UHD 显示器，仅当 Windows 10 缩放为 175% 或更高时（图像的轻微上采样发生在 175%缩放）。由于在 4K UHD 显示器上以 150% 缩放 Windows 10 就能够舒适地阅读文本而言是“不确定的”，并且任何小于 150% 的缩放基本上都是不可读的，因此似乎是 4K 图像宽度的一般经验法则超高清显示器为 2600 像素。此图像宽度将涵盖 150% 或更高的 Windows 10 缩放比例。

对于小于 150% 的 Windows 缩放比例，将对 2600 像素的图像进行上采样以填充视口的宽度。 但是，在我看来，大多数人会将 4K UHD 显示器上的 Windows 10 缩放到至少 150% 以使文本可读（这是我认为驱动我的图像应该有多宽的一个重要假设）。 由于与 Windows 10 缩放 150% 相关的视口宽度为 2560 像素，因此以 2600 像素宽创建的图像将填充浏览器视口而不会进行上采样（并且可能会降低质量）。

我是否正确理解 Windows 10 缩放和浏览器视口宽度之间的关系？我关于将 4K 网站设计的所有图像尺寸调整为 2600 像素宽度的结论是否正确？

标签： windowsimageviewportmonitor

解决方案

推荐阅读