HTML中如何适配不同DPI屏幕的显示效果-html教程-PHP中文网

viewport 的 width=device-width 和 initial-scale=1.0 必须同时存在，缺一不可；单独设置 width=device-width 会导致 ios safari 默认放大、安卓忽略缩放逻辑，且 devtools 模拟失效。

html中如何适配不同dpi屏幕的显示效果

viewport 的 initial-scale 和 device-width 必须同时存在

只写 width=device-width 不加 initial-scale=1.0，iOS Safari 会默认放大 1.25 倍，Android 浏览器可能直接忽略缩放逻辑，PC 端用 DevTools 模拟时也会失效。这不是兼容性“建议”，而是硬性要求。

常见错误是把 viewport 写成：<meta name="viewport" content="width=device-width"> —— 缺少 initial-scale 就等于没设。

必须写成：<meta name="viewport" content="width=device-width, initial-scale=1.0">
避免 user-scalable=no：它会禁用双指缩放，对视力障碍用户不友好，且在高DPI屏上反而加剧文字不可读问题
不要用 target-densitydpi：该属性仅 Android Browser 支持，Chrome、Edge、Safari 已完全废弃，写了也无效

CSS 中用 rem + 动态 html font-size 替代 px

px 在高 DPI 屏上固定像素输出，不随系统缩放变化，导致文字过小或模糊；em 又依赖嵌套层级，计算不可控。rem 是唯一稳定锚点，但必须配合 JS 动态设置根字体大小，否则只是“伪响应式”。

典型做法是以设计稿宽度（如 375px）为基准，按比例缩放：document.documentElement.style.fontSize = document.documentElement.clientWidth / 37.5 + 'px';

iOS Safari 横竖屏切换时可能不触发 resize，需额外监听 orientationchange
若用现代框架（如 Vue/React），推荐封装为自执行函数或在 useEffect/onMounted 中调用，避免重复执行
慎用 clamp() 直接替代 rem：它虽能限制范围，但无法响应系统级字号缩放（如 Windows “放大文本”设置）

@media 查询要匹配 min-resolution 而非仅 width

只靠 max-width: 768px 匹配平板，会漏掉高 DPI 的小屏设备（如 Pixel 7、iPhone 14 Pro）。真正决定渲染清晰度的是设备像素比（dpr）和分辨率密度（dpi）。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

正确写法是组合使用：

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  body { font-size: 18px; }
  .icon { background-image: url(icon@2x.png); background-size: contain; }
}

min-resolution: 192dpi 对应 dpr ≥ 2，覆盖绝大多数 Retina/4K 屏
务必提供 @2x 或 @3x 图片资源，并确保 background-size: contain 或 cover 配合使用，否则高清图会被拉伸失真
不要在媒体查询里写死 device-width：它返回的是设备独立像素（DIP），不是 CSS 像素，DevTools 模拟结果与真机常不一致