物理屏幕宽度与CSS像素宽度的差异及移动端适配疑问

嘿，我来帮你把这个困惑彻底捋清楚！你碰到的其实是响应式设计里最基础但也最容易搞混的物理像素和CSS逻辑像素的区别，咱们一步步说：

• 物理像素：就是屏幕硬件上实打实的发光小点，比如你说的HTC One的1080px宽度，就是屏幕横向有1080个独立的发光单元，这是硬件层面的参数。
• CSS像素（逻辑像素）：这是浏览器用来渲染网页的「虚拟像素单位」，它和物理像素的比例由**设备像素比（DPR）**决定，公式很简单：DPR = 物理像素 / CSS像素。HTC One的DPR是3，意思是1个CSS像素会用3×3个物理像素来渲染，这样文字、图形会更细腻清晰，不会出现锯齿感。

这是因为手机浏览器默认会做视口缩放处理！如果你的网页没有设置正确的viewport元标签，浏览器会默认把网页当成桌面端设计（比如默认980px宽），然后自动缩放到适配手机的CSS宽度（比如360px），这时候你看到的内容是经过缩放后的效果，自然不是物理宽度的1/3。

要让你的响应式设计正常工作，必须在HTML的<head>里加上这个关键标签：

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

它的作用是告诉浏览器：

• width=device-width：把CSS视口的宽度设置为设备的CSS像素宽度（比如HTC One的360px）
• initial-scale=1.0：初始缩放比例为1，也就是让1个CSS像素严格对应DPR个物理像素来渲染

你用Photoshop做线框的时候，完全不用管物理像素，直接按Bootstrap定义的CSS像素断点来设计就好：

• 先从智能手机基准尺寸入手：推荐用360px或375px（现在主流手机的CSS宽度）来做初稿
• 后续适配更大屏幕时，再按Bootstrap的官方断点（768px平板、992px桌面、1200px大屏）来扩展设计

这样做出来的线框，配合正确的viewport标签和Bootstrap的响应式类，就能在各种设备上完美适配啦！

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