为何100%宽度图片尺寸超出screen.width*devicePixelRatio？

嘿，我来帮你拆解下这个困扰你的问题～先从你的测试设备Moto G4 Play说起：它的逻辑屏幕宽度是360px，设备像素比（DPR）是2，所以物理分辨率是720×1280，这个参数是关键。

问题1：为什么100%宽度的图片实测是964px，而非预期的720px？ #

最可能的原因是你没设置正确的viewport元标签！移动端浏览器默认会把页面渲染在一个980px左右的“虚拟视口”里，然后再缩放到设备屏幕的逻辑宽度显示。这时候图片设置width:100%，是占满这个980px的虚拟视口，所以实测像素接近964px（可能还受body默认margin影响），完全不是你预期的720px物理像素。

问题2：为什么720px固定宽度的图片不能覆盖全屏？ #

同样是viewport的锅：如果没设置viewport，页面的逻辑宽度是980px，720px的图片比这个宽度小，自然撑不满；就算设置了viewport，CSS里的px是逻辑像素，720px逻辑像素远大于设备360px的逻辑宽度，这时候图片会横向溢出，但你说的“无法覆盖全屏”，大概率还是viewport没配置对，或者图片是默认的inline-block属性，底部有基线间隙，看起来没撑满。

解决办法 #

第一步：添加正确的viewport标签 #

把这个标签放在HTML的<head>里，让浏览器用设备的逻辑宽度作为视口宽度：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

加上这个之后，页面的逻辑宽度就会匹配设备的360px，DPR=2会自动处理物理像素的缩放。

第二步：设置图片的CSS样式 #

要让图片完美占满屏幕，用以下样式：

img {
  width: 100%; /* 占满父容器（这里就是屏幕逻辑宽度360px） */
  display: block; /* 去掉inline元素默认的底部间隙 */
  max-width: 100%; /* 防止图片本身尺寸过大时溢出 */
  height: auto; /* 保持图片的原始宽高比 */
}

这时候图片的物理像素宽度就是360px × 2 = 720px，刚好和你的设备物理分辨率匹配，不会出现尺寸超出的情况。

第三步：重置页面默认样式 #

浏览器默认给html和body加了margin，会导致图片无法完全贴边，所以重置一下：

html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden; /* 避免出现横向滚动条 */
}

如果想用固定宽度的图片，记住CSS里的px是逻辑像素，所以设置width: 360px就会对应720px的物理像素，刚好铺满屏幕。

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