使用innerWidth与devicePixelRatio计算CSS逻辑像素遇异常，求可靠方案

首先明确：正常情况下，window.innerWidth和window.innerHeight本身就是以CSS逻辑像素为单位的，不需要额外除以devicePixelRatio。你遇到的偏差是Chrome开发者工具的模拟设置问题，而非公式错误。

问题原因分析 #

你在模拟iPhone 12 Pro时得到window.innerWidth=780，是因为设备工具栏的**视口缩放比例被调整为50%**了——此时DevTools会将逻辑像素值放大2倍显示，导致window.innerWidth变成了实际逻辑宽度的2倍（390*2=780）。这种情况下用780/3自然会得到错误结果。

可靠的解决步骤 #

• 恢复DevTools的100%缩放：在设备工具栏右上角找到缩放控制（显示当前缩放比例的区域），点击选择100%，此时window.innerWidth会回到390，和设备的实际逻辑宽度一致。
• 正确获取逻辑像素：直接读取window.innerWidth/window.innerHeight即可，这两个API返回的就是CSS逻辑像素尺寸，无需额外计算。
• 排查其他干扰项：检查浏览器本身是否开启了页面缩放（快捷键Ctrl+/Cmd+/-），确保页面处于100%缩放状态。

补充说明 #

devicePixelRatio是物理像素和逻辑像素的比值，用于处理高清屏的渲染（比如图片适配），但它和获取当前视口的逻辑像素尺寸无关——视口的逻辑像素尺寸直接由window.innerWidth提供。

内容的提问来源于stack exchange，提问作者AppDeveloper