面试官：移动端为什么会有1px问题？

移动端为什么会有1px问题？，这是一道非常高频的互联网大厂前端面试题，但是很多同学在面试时候要么回答不出来，要么回答的不完整。老规矩，点赞收藏，点点关注支持一下，给我一分钟，理想哥教大家该怎么满分回答这个问题

如果我是求职者，我会这么回答：

在css中我们一般使用px作为单位，在桌面浏览器中css的1个像素往往都是对应着电脑屏幕的1个物理像素，这可能会造成我们的一个错觉，那就是css中的像素就是设备的物理像素。

但实际情况却并非如此，css中的像素只是一个抽象的单位，在不同的设备中，css中的1px所代表的设备物理像素是不同的。

在早先的移动设备中，屏幕像素密度都比较低，如iphone3，它的分辨率为 320x480，就是说，在iphone3上，一个 css 像素确实是等于一个屏幕物理像素的。但后来随着技术的发展，移动设备的屏幕像素密度越来越高。

从iphone4开始，苹果公司推出了Retina屏，分辨率提高了一倍，变成640x960，但屏幕尺寸却没变化，这就意味着同样大小的屏幕上，像素却多了一倍，这时，一个 css 像素是等于两个物理像素的。其他品牌手机也是同样的道理，设备不同，一个css像素对应的屏幕物理像素也不同。

还有一个因素也会引起css中px的变化，那就是用户缩放。例如，当用户把页面放大一倍，那么css中1px所代表的物理像素也会增加一倍；反之把页面缩小一倍，css中1px所代表的物理像素也会减少一倍。

window对象有一个devicePixelRatio可以让我们知道该设备上一个css像素代表多少个物理像素。devicePixelRatio = 物理像素 / 独立像素。这里的独立像素就是css的px单位，例如，在Retina屏的iphone上，devicePixelRatio的值为2，也就是说1个css像素相当于2个物理像素。

以上就是这个问题的回答了，大家可以下次面试时试试这么回答看看效果。

最后，欢迎关注理想哥，每天学点前端面试小技巧。