iPhone Safari缩放分辨率疑问：iPhone7上400px图片为何能两两并排？

嘿，这个问题其实是刚接触移动端网页设计时很容易踩的坑——混淆了设备物理像素和CSS逻辑像素，我来给你理清楚：

首先得明确两个关键概念：

• 设备物理像素：就是你说的iPhone7标称的750×1334，这是屏幕硬件上实际存在的发光点数量，是固定的硬件参数。
• CSS逻辑像素：我们写代码时用的px单位，是浏览器用来计算布局的虚拟单位。它和物理像素的对应关系由**设备像素比（DPR）**决定——iPhone7的DPR是2，也就是说1个CSS像素会对应2×2个物理像素。

所以iPhone7的逻辑布局宽度其实是 750 ÷ 2 = 375px，而不是750px——这才是浏览器渲染页面时用的“屏幕宽度”！

大概率是你没设置正确的<meta viewport>标签！

如果没有这个标签，移动端浏览器会默认开启“兼容模式”：先把页面渲染成980px宽的虚拟视口，再整体缩放适配到手机屏幕的逻辑宽度（iPhone7的375px）。这时候缩放比例大概是 375/980 ≈ 0.38，你设置的400px图片实际显示宽度只有 400 × 0.38 ≈ 152px，两个加起来才304px，远小于375px，自然能并排显示。

1. 添加正确的viewport标签
   这是移动端网页的基础操作，加上它就能让CSS像素直接对应设备的逻辑像素：

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

   加了之后，iPhone7的布局视口就变成375px，你再放400px的图片，单个就会超出屏幕宽度，更别说两两并排了。

2. 用相对单位做响应式布局
   如果想让图片在移动端两两并排，别用固定的400px，改用百分比、flex或者grid：

   • 比如给图片设置width: 50%;，再处理掉inline-block元素默认的空白间隙（可以给父元素加font-size: 0;，或者给图片加负margin）；
   • 或者用flex布局：父元素设置display: flex;，图片设置flex: 0 0 50%;，简单又省心。

inline-block元素之间会因为代码里的换行、空格产生默认的空白间隙，有时候你觉得布局宽度不对，可能是这个小细节在捣乱，记得排查一下～

内容的提问来源于stack exchange，提问作者B. Bachir