如何通过Viewport Meta配置与DPR动态计算实现PC项目移动端适配？

一、 前言：从桌面到口袋的惊魂之旅

说真的，很多兄弟在把 PC 项目搬到手机上时脑子里只会浮现「宽度 1440px」的巨型画布，却忘了那可怜的 375px 小屏幕正等着被虐，捡漏。。

反思一下。 我曾经深夜对着代码哭泣——“这到底是视口还是幻觉？”——于是决定把 Viewport Meta 和 DPR 那点儿“黑科技”拎出来好好聊聊这场适配的血与泪。

二、 Viewport Meta 的神秘力量

先来一句最常见的配置：

听起来很乖巧，可是别忘了在高 DPR设备上，这玩意儿默认会把 CSS 像素映射成物理像素，导致图片模糊、文字细碎。

于是我们往 meta 里塞进 initial-scale=1/dpr 让页面跟随设备像素比自动缩放：，拜托大家...

// 动态写入 meta
const dpr = window.devicePixelRatio || 1;
const scale = .toFixed;
document.querySelector.setAttribute(
  'content',
  `width=device-width, initial-scale=${scale}, maximum-scale=${scale}, user-scalable=no`
);

⚠️ 注意：禁用缩放会触发无障碍警告，别在教育/医疗类项目里这么干。