4k显示器文字模糊源于系统dpi适配与浏览器渲染不一致：windows/macos缩放导致devicepixelratio未正确读取或css未响应，需用viewport meta、rem动态根字体、2x图标、electron启用高dpi支持及canvas显式缩放修复。
HTML元素在4K显示器上文字模糊或缩放错乱
不是HTML函数本身的问题——HTML没有“函数”，是浏览器渲染层和系统DPI适配没对齐导致的。核心矛盾在于：Windows/macOS把高分屏当成“缩放125%或150%的普通屏”来处理，但部分浏览器（尤其是旧版Edge、某些Electron应用）没正确读取window.devicePixelRatio，或CSS未启用响应式单位。
- 常见现象：
font-size: 14px在4K屏上实际渲染成约17.5px，但边缘发虚；border: 1px solid被拉伸成1.25物理像素，出现灰边 - 关键检查点：先在控制台运行
window.devicePixelRatio，4K+125%缩放下应返回1.25（Windows）或2（macOS Retina），若返回1说明页面被强制运行在“兼容模式” - 立即生效的修复：在
里加<meta name="viewport" content="width=device-width, initial-scale=1.0">，否则Chrome/Firefox可能忽略DPI
CSS中px单位在高DPI屏上为何不“等距”
px在CSS里是逻辑像素，不是物理像素。当window.devicePixelRatio === 2时，1个CSS px对应4个物理像素（2×2），但字体渲染引擎会插值放大，造成模糊。
- 安全替代方案：
rem配合根字体动态设置（document.documentElement.style.fontSize = 16 * window.devicePixelRatio + 'px'），或直接用em/%做相对缩放 - 慎用
transform: scale(0.8)强行“还原”尺寸——它会放大整个渲染层，模糊更严重，且click事件坐标偏移 - 图标类资源必须提供2x版本，
<img src="icon.png" srcset="icon@2x.png 2x">，否则background-image用url()也要配@media (-webkit-min-device-pixel-ratio: 2)
Electron应用在4K屏上窗口模糊或菜单错位
Electron默认禁用DPI感知，尤其v13之前版本，即使系统设为125%，它仍按96 DPI渲染，导致所有UI被拉伸、文字糊成一片。
- 必须在主进程启动前设置：
app.commandLine.appendSwitch('high-dpi-support', 'true')和app.commandLine.appendSwitch('force-device-scale-factor', '1') - v14+可改用
app.enableHighDpiSupport()，但注意：该API只在app.whenReady()前调用才生效 - 如果用了
BrowserWindow的webPreferences.zoomFactor，务必同步监听display-metrics-changed事件重设，否则外接4K显示器时窗口突然缩放错乱
Canvas绘图在4K屏上线条发虚或锯齿明显
<canvas></canvas>的width/height属性是物理像素尺寸，而CSS width/height是逻辑像素。两者不匹配时，浏览器自动缩放canvas内容，必然模糊。
- 标准写法：获取设备像素比后，显式设置canvas大小：
const dpr = window.devicePixelRatio || 1; canvas.width = canvas.clientWidth * dpr; canvas.height = canvas.clientHeight * dpr; - 绘图前必须用
ctx.scale(dpr, dpr)，否则路径坐标会落在非整数物理像素上，抗锯齿失效 - 避免用
ctx.lineWidth = 1画细线——在dpr=1.25时，实际渲染宽度是1.25像素，浏览器只能插值，改用ctx.lineWidth = Math.ceil(1 * dpr) / dpr逼近整数物理像素
高DPI适配最麻烦的不是代码量，而是测试环节：必须真机连4K显示器，开系统缩放，再切到100%/125%/150%反复验证——模拟器和devtools里的device toolbar完全不可信。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
