手机分辨率和网页中的px是一回事吗？

这里是修真院前端小课堂，每篇分享文从

【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】

八个方面深度解析前端知识/技能，本篇分享的是：

【手机分辨率和网页中的px是一回事吗？ 】

1.背景介绍

我们通常使用像素这个单位作为我们进行网页制作的单位，那么像素和设备的分辨率是一样的概念吗？又或者有什么不同？

2.知识剖析

A.像素（pixel)，全称为图像元素，是表示显示器或图像显示大小的基本单位。

（1） 物理像素：指显示器上显示大小的基本单位。

（2）设备独立像素：可以认为是计算机坐标系中的一个点。这个点代表一个可以由程序使用并控制的虚拟像素。

B.分辨率是指显示器所能显示的像素有多少。

由于屏幕上的点、线和面都是由像素组成的，显示器可显示的像素越多，画面就越精细，同样的屏幕区域内能显示的信息也越多，所以分辨率是个非常重要的性能指标之一。可以把整个图像想象成是一个大型的棋盘，而分辨率的表示方式就是所有经线和纬线交叉点的数目。显示分辨率一定的情况下，显示屏越小图像越清晰，反之，显示屏大小固定时，显示分辨率越高图像越清晰。

3.常见问题

将设备像素（device pixels）和CSS像素(css pixel)混为一谈

4.解决方案

（10在css中我们一般使用px作为单位，在桌面浏览器中css的1个像素往往都是对应着电脑屏幕的1个物理像素，这可能会造成我们的一个错觉，那就是css中的像素就是设备的物理像素。但实际情况却并非如此，css中的像素只是一个抽象的单位，在不同的设备或不同的环境中，css中的1px所代表的设备物理像素是不同的。在早先的移动设备中，屏幕像素密度都比较低。如iphone3，它的分辨率为320x480,这时，一个css像素是等于一个物理像素的。后来随着技术的发展，移动设备的屏幕像素密度越来越高，从iphone4开始分辨率提高了一倍，变成640x960。但屏幕尺寸却没变化，这就意味着同样大小的屏幕上，像素却多了一倍，这时，一个css像素是等于两个物理像素的。安卓设备上也是同理，安卓设备上的一个css像素相当于多少个屏幕物理像素，也因设备的不同而不同，没有一个定论。

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

5.编码实战

6.viewport

viewport，翻译为视口，也即可视区域的大小。html元素也即文档的宽度，来自于viewport的宽度。在移动端，情况将变得复杂，我们把这个viewport称为layout viewport，在手机上面，因为手机的屏幕很小，当初iphone发布时，为了显示完整的桌面网页，就把给layout viewport设置了一个980px的值。安卓手机上测试也是980px。但是这样显示网页，那网页的字体、元素都很小，小到打开这样一个网页，首先要做的就是放大页面。为了提高可读性，Apple允许通meta标签来设置layout viewport的宽度。通常我们把layout viewport设置为device-width。

7.参考文献

http://www.tuicool.com/articles/ri2AJv

http://www.cnblogs.com/2050/p/3877280.html

>鸣谢

感谢大家观看

BY : 李仁 | 

本文地址：https://blog.csdn.net/jnshu_it/article/details/85988016