移动端分辨率和像素的基本知识

关于移动端分辨率和像素的基本知识：

屏幕
移动设备与PC设备最大的差异在于屏幕，这主要体现在屏幕尺寸和屏幕分辨率两个方面。
通常我们所指的屏幕尺寸，实际上指的是屏幕对角线的长度（一般用英寸来度量）如下图所示

而分辨率则一般用像素来度量 px，表示屏幕水平和垂直方向的像素数，例如1920*1080指的是屏幕垂直方向和水平方向分别有1920和1080个像素点而构成，如下图所示
长度单位
在Web开发中可以使用px（像素）、em、pt（点）、in（英寸）、cm（厘米）做为长度单位，我们最常用px（像素）做为长度单位。
我们可以将上述的几种长度单位划分成相对长度单位和绝对长度单位。

如上图所示，iPhone3G/S和iPhone4/S的屏幕尺寸都为3.5英寸（in）但是屏幕分辨率却分别为480320px、960480px，由此我们可以得出英寸是一个绝对长度单位，而像素是一个相对长度单位（像素并没有固定的长度）。
像素密度
DPI（Dots Per Inch）是印刷行业中用来表示打印机每英寸可以喷的墨汁点数，计算机显示设备从打印机中借鉴了DPI的概念，由于计算机显示设备中的最小单位不是墨汁点而是像素，所以用PPI（Pixels Per Inch）值来表示屏幕每英寸的像素数量，我们将PPI、DPI都称为像素密度，但PPI应用更广泛，DPI在Android设备比较常见。
如下图所示，利用勾股定理我们可以计算得出PPI

PPI值的越大说明单位尺寸里所能容纳的像素数量就越多，所能展现画面的品质也就越精细，反之就越粗糙。
Retina即视网膜屏幕，苹果注册的命名方式，意指具有较高PPI（大于320）的屏幕。
思考：在屏幕尺寸（英寸）固定时，PPI和像素大小的关系？
结论：屏幕尺寸固定时，当PPI 越大，像素的实际大小就会越小，当PPI越小，像素实际大小就越大。
设备独立像素
随着技术发展，设备不断更新，出现了不同PPI的屏幕共存的状态（如iPhone3G/S为163PPI，iPhone4/S为326PPI），像素不再是统一的度量单位，这会造成同样尺寸的图像在不同PPI设备上的显示大小不一样。
如下图，假设你设计了一个163163的蓝色方块，在PPI为163的屏幕上，那这个方块看起来正好就是11寸大小，在PPI为326的屏幕上，这个方块看起来就只有0.50.5寸大小了。

做为用户是不会关心这些细节的，他们只是希望在不同PPI的设备上看到的图像内容差不多大小，所以这时我们需要一个新的单位，这个新的单位能够保证图像内容在不同的PPI设备看上去大小应该差不多，这就是独立像素，在IOS设备上叫PT(Point)，Android设备上叫DIP(Device independent Pixel)或DP。
举例说明就是iPhone 3G（PPI为163）1dp = 1px，iPhone 4（PPI为326）1dp = 2px。

我们也不难发现，如果想要iPhone 3G/S和iPhone 4/S图像内容显示一致，可以把iPhone 4/S的尺寸放大一倍（它们是一个2倍(@2x)的关系），即在iPhone3G/S的上尺寸为4444px，在iPhone4/S上为8888px，我们要想实现这样的结果可以设置4444dp，这时在iPhone3G/S上代表4444px，在iPhone4/S上代表8888px，最终用可以看到的图像差不多大小。
通过上面例子我们不难发现dp同px是有一个对应（比例）关系的，这个对应（比例）关系是操作系统确定并处理，目的是确保不同PPI屏幕所能显示的图像大小是一致的，通过window.devicePixelRatio可以获得该比例值。
见代码示例1-1.html
下图展示了iPhone不同型号间dp和px的比例关系

从上图我们得知dp（或pt）和px并不总是绝对的倍数关系（并不总能保证能够整除），而是window.devicePixelRatio ~= 物理像素/独立像素，然而这其中的细节我们不必关心，因为操作系统会自动帮我们处理好（保证1dp在不同的设备上看上去大小差不多）。
像素
1、物理像素指的是屏幕渲染图像的最小单位，属于屏幕的物理属性，不可人为进行改变，其值大小决定了屏幕渲染图像的品质，我们以上所讨论的都指的是物理像素。
// 获取屏幕的物理像素尺寸
window.screen.width;
window.screen.height;
// 部分移动设备下获取会有错误，与移动开发无关，只需要了解
2、CSS像素，与设备无关像素，指的是通过CSS进行网页布局时用到的单位，其默认值(PC端)是和物理像素保持一致的（1个单位的CSS像素等于1个单位的物理像素），但是我们可通缩放来改变其大小。
见代码示例1-3.html
我们通过调整浏览器的缩放比例可以直观的理解CSS像素与物理像素之前的对应关系，如下图所示：

我们需要理解的是物理像素和CSS像素的一个关系，1个物理像素并不总是等于一个CSS像素，通过调整浏览器缩放比例，可以有以上3种情况。

移动端分辨率和像素的基本知识相关推荐

前端pc端、手机端适配基本知识
前端pc端.手机端适配问题一个项目如何做到手机.电脑共用的方式 1.第一种方式:响应式布局(栅格布局),即通过媒体查询控制css样式,从而实现一套代码手机.电脑共享.一般而言,手机.电脑共享样式,其 ...
移动端屏幕设备像素_如果您所有的移动设备都形成一个屏幕怎么办？
移动端屏幕设备像素 What if all your mobile devices were a single screen? This probably isn't the most common ...
2560x1600分辨率高吗_做设计还弄不清分辨率和像素之间的关系，来了解下他们是怎么换算...
许多同学都在问我关于像素的问题,为什么印刷时要300分辨率以上?网页为什么72就够了?做户外喷绘30,甚至巨幅画面20就上了.关于这些还是很多人不知道的,要不也不会被卖手机的忽悠,各大手机推销员拿着手 ...
iphone各机型的分辨率及像素
分辨率和像素经新xcode6模拟器验证(分辨率为pt,像素为真实pixel): iPhone4s分辨率320x480,像素640x960,@2x iPhone5分辨率320x568,像素640x11 ...
前端 - 屏幕尺寸，分辨率，像素，PPI 解析汇总
1.概念介绍 TBD 2.难重点理解 TBD 3.屏幕自适应 TBD 4.额外补充 TBD 5.参考 https://www.jianshu.com/p/c3387bcc4f6e# //(全解析)屏 ...
【音视频处理】码率、帧率越高越清晰？分辨率、像素、dpi之间是什么关系？码率的真实作用，I帧、B帧、P帧是什么
大家好,欢迎来到停止重构的频道. 本期我们介绍一下视频的一些基础概念,如帧率.码率.分辨率.像素.dpi.视频帧.I帧.P帧.gop等. 会解释多少码率是清晰的,是否帧率越高越流畅等问题. 这些概念是 ...
清晰度、分辨率、像素、4K、HDR的区别
像素,分辨率,清晰度的定义: 1.像素是指照片的点数(表示照片是由多少点构成的),分辨率是指照片像素点的密度(是用单位尺寸内的像素点,一般用每英寸多少点表示--dpi).照片实际大小是像素决定的.一个 ...
相机分辨率、图片分辨率、像素及图片尺寸关系的思考
以前没有仔细思考过这个问题,相关概念一直有些模糊,这里整理一下我的思考及学习所得,供大家参考,欢迎批评指正. 概念相机分辨率相机分辨率是由相机内的CCD或CMOS上光敏元件的总数决定的.以CCD相 ...
区分分辨率、像素、点、尺寸
分辨率.像素,通常用来屏幕或者图片上,用来形容清晰度.我们通常说这个屏幕的分辨率是多少多少,摄像头像素多少多少,具体什么意思呢? 以分辨率为320*480的iphone3GS屏幕(一倍屏)为例说明: ...

移动端分辨率和像素的基本知识

关于移动端分辨率和像素的基本知识：

移动端分辨率和像素的基本知识相关推荐

最新文章

热门文章