屏幕尺寸:
设备的屏幕尺寸是指屏幕的对角线长度
iPhone7 是4.7寸 iPhone7p是5.5寸
1英寸 = 2.54厘米
5.5in =5.5*2.54 =13.97cm
屏幕分辨率:
屏幕分辨率是指:屏幕的像素点
pc常见分辨率[1024*768,1440*900,...]
移动常见分辨率[2160*1080,1920*1080,1334*750,1136*640,..]
在说分辨率的时候我们常常会把大的值说在前面,所以在PC端屏幕宽度比高度的值要大一点,第一个值一般是指的宽度第二个值为高度。移动端正好相反,第一个值是宽度。
PPI(Pixels Per Inch)| DPI(Dots Per Inch):
两个值是屏幕每英寸的像素数量,即像素密度。
一般的计算公式: DPI= 对角线分辨率 / 屏幕尺寸
屏幕对角线的分辨率也就是屏幕对角线上的像素点数,可以根据已知的横纵分辨率通过勾股定理计算得。
勾股定理算出对角线的分辨率(例如1920*1080的分辨率)
dpi=1080平方+1920平方的平方根 约等于2203
对角线分辨率除以屏幕尺寸:2203/5 约等于440dpi (每寸有440个像素)
对角线分辨率除以屏幕尺寸:2203/5≈440dpi
设备像素:
设备像素是物理概念,指的是设备中使用的物理像素,也就是屏幕中的发光的点数(屏幕由很多个发光点组成,每个发光点可以显示不同的颜色,这些发光的点组成了屏幕)
比如iPhone 5的分辨率640 x 1136px。横向有640个发光的点,纵向有1136个发光的点。所以我们说iPhone5 的设备水平像素是640像素,指的是640个发光点。
设备独立像素(DIP):
设备独立像素(DIP,device-independent pixel,density-independent pixel),设备独立像素是指:独立于设备的用于逻辑上衡量像素的单位。在移动Web开发中就是指的CSS的逻辑像素。
设备像素比(devicePixelRatio)
设备像素比DPR(devicePixelRatio)是默认缩放为100%的情况下,设备像素(也称物理像素)和CSS像素的比值(设备独立像素)。
DPR = 设备像素 / CSS像素
仅仅计算横向或者纵向。比如:iphone5为例:水平物理像素640 页面缩放100%时,
横向320px,则dpr = 640 / 320 = 2
DPR也有对应的javascript属性window.devicePixelRatio (ie11+,edge,chrome49+, Safari9.1+)
DPR不一定都是整数,尤其是android设备十分的碎片化!
总结:
物理像素(dpr1)又被称为设备像素,他是显示设备中一个最微小的物理部件。每个像素可以根据操作系统设置
自己的颜色和亮度。正是这些设备像素的微小距离欺骗了我们肉眼看到的图像效果
css像素(dpr2) (四个物理像素来显示一个css像素,屏幕显的更加细腻)也叫设备独立像素(密度无关像素)
屏幕密度 是指一个设备表面存在的像素数量,通常以每英寸有多少像素来计算(PPI)(对角线上每英寸多少像素)
dpr(设备像素比) =物理像素 / 设备独立像素 (ip6 750物理像素/375css像素=dpr2)
在js中可以通过 window.devicePixelRatio获取当前设备的dpr。
而css中可以通富-webkit-device-pixel-ratio,-webkit-min-device-pixel-ratio和
-webkit-max-device-pixel-ratio进行媒体查询,对不同dpr的设备做一些一个是设配
(这里只针对webkit内核的浏览器和webview),dip或dp与屏幕的密度有关。dip可以用来辅助
区分视网膜设备还是非视网膜设备
分辨率的换算
iPhone6 的设备宽度和高度为 375pt *667pt,可以理解为设备的独立像素(css像素)
而dpr为2(4个物理像素组成),根据上面的公式,我们可以得出其物理像素为 750 * 1334
举例:某元素的css样式
width:2px;
height:2px;
在不同的屏幕上,css像素索呈现的物理尺寸是一致的,而不同的是css像素所对应的物理像素是不一致的
在普通屏幕下1个css像素对应1个物理像素,而在retina屏幕下(视网膜屏幕),1个css像素对应的却是4个物理像素
理想视口(ideal viewport)
第一,不需要用户缩放和横向滚动条就能正常的查看网站的所有内容;
第二,显示的文字的大小是合适,比如一段14px大小的文字,不会因为在一个高密度像素的屏幕里显示得太小而无法看清,
理想的情况是这段14px的文字无论是在何种密度屏幕,何种分辨率下,显示出来的大小都是差不多的。当然,不只是文字,
其他元素像图片什么的也是这个道理。
理想视口的宽度一般可以通过以下公式计算:
理想视口的宽度 = 设备像素 / dpr
也就是当布局视口的宽度 等于 设备独立像素的宽度时就是理想视口。
简单的指定的方法:
<!--这一行代码告诉浏览器,布局视口的宽度应该与理想视口的宽度一致-->
<meta name="viewport" content="width=device-width">
或者
<meta name="viewport" content="initial-scale=1">
meta标签控制布局视口的缩放
<meta name="viewport" content="initial-scale=1">
为什么我们指定了meta标签的viewport缩放比例1也可以实现理想视口呢?
这个值是确定整体网页缩放的比例。
缩放比 = 理想视口的宽度 / 视觉视口的宽度
也就是说当视觉视口的宽度 和 理想视口的宽度相等时,则就是1。
因为手机端的浏览器会自动设置布局视口的宽度为视觉视口的宽度,所以此时:设备的布局视口==视觉视口==理想视口。
视觉视口:当页面手动放大的时候,用户可以看到的网页内容减少,视觉视口的尺寸变小。反之,同理。
默认的缩放(initial-scale)值设置后,浏览器会根据理想视口计算出视觉视口,并设置布局视口==视觉视口。
但是如果width和initial-scale都设置的时候,浏览器会取两个值较大的,所以可以通过width设置一个最小的布局视口宽度。
viewport的其他设置
maximum-scale
在移动端,你可能会考虑用户浏览不便,然后给予用户放大页面的权利,但同时又希望是在一定范围内的放大,这时就可以使用maximum-scale来进行约束。
maximum-scale用于指定用户能够放大的比例。
举个例子来讲:
<meta name="viewport" content="initial-scale=1,maximum-scale=5" />
假设页面的默认缩放值initial-scale是1,那么用户最终能够将页面放大到这个初始页面大小的5倍。
minimum-scale
类似maximum-scale的描述,不过minimum-scale是用来指定页面缩小比例的。
通常情况下,为了有更好地体验,不会定义该属性的值比1更小,因为那样页面将变得难以阅读。
user-scalable
如果你不想页面被放大或者缩小,通过定义user-scalable来约束用户是否可以通过手势对页面进行缩放即可。
该属性的默认值为yes,即可被缩放(如果使用默认值,该属性可以不定义);当然,如果你的应用不打算让用户拥有缩放权限,可以将该值设置为no。
使用方法如下:
<meta name="viewport" content="user-scalable=no" />