我为一个包含大量信息的网站设计了首页。我将页面尺寸固定为 3530x2070,这应该可以轻松适应分辨率为 3840x2160 的 4K 屏幕。
<div id="mainDiv" style="width:3530px;height:2070px;border:1px black solid;">
但是,当我连接到 4K 电视(不是显示器)时,我只能看到大约 2700 像素的宽度 - 而且使用 4096x2160 屏幕分辨率 - 3840x2160 甚至更窄。
<div id="mainDiv" style="width:2700px;height:1070px;border:1px black solid;">
我尝试过索尼和三星两种电视型号。
还要注意,每台电视都检测到了正确的分辨率即,当我将计算机的电视分辨率设置为 3840 时,电视显示其为 3840;而当我将计算机的分辨率设置为 4096 时,电视也显示其设置为 4096。
这意味着计算机和电视在分辨率上一致,但浏览器没有显示网页的整个宽度。
还有一个问题,在我的 1920x1080 电脑显示器上,网页大小调整如我所料(当我将其缩小以匹配该分辨率时)。边框和浏览器框架等会丢失一些像素,但这是意料之中的。宽度上丢失超过 1000 个像素并不是我所期望的。
<div id="mainDiv" style="width:1900px;height:1065px;border:1px black solid;">
我通过 HDMI 电缆运行迷你显示端口,正如我所说,两个设备都同意该连接的分辨率。
答案1
DPI 缩放似乎是罪魁祸首。
较新版本的 Windows(自 8.1 起)会自动缩放每个显示器的 DPI,以适应像素密度非常高的显示器。看来 Windows 已将 4K 电视缩放到正常值的 150%(2700 的 150% 是 4050,非常接近 4096)。
Firefox 和 Chrome 的最新版本可检测系统 DPI 缩放设置并进行相应调整。您可以使用某些高级设置禁用此功能:
在 Firefox 中,这由配置值控制
layout.css.devPixelsPerPx
,可以在 中编辑about:config
。-1.0
是默认值,浏览器将与主显示器上的系统 DPI 缩放值匹配。 要强制 Firefox 不缩放 DPI,请将此值设置为1.0
。 将其设置为任何其他正值会指示浏览器按该值缩放(系统上的默认值似乎是1.5
)。在 Chrome 中,
high-dpi-support
这是由注册表中的DWORD 值控制的HKCU\Software\Google\Chrome\Profile
。设置为 0 以禁用缩放,设置为 1 以启用缩放,或设置为 2 以使用默认值。