移动端的视口/像素基本知识
Posted llcdxh
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了移动端的视口/像素基本知识相关的知识,希望对你有一定的参考价值。
一、屏幕尺寸
指屏幕对角线的长度,单位是英寸,1英寸=2.54cm
二、屏幕分辨率(物理像素)
指在横纵方向上的像素点,单位是px,1px=1个像素点。这里的1像素指的是设备的1个物理像素点。如第一点中的图,iphone6的分辨率为750*1334px,即是横向上有750个物理像素点,纵向上有1334个物理像素点。
三、像素密度(pixels per inch,PPI)
屏幕上每英寸可以显示的像素点的数量,单位ppi;屏幕像素密度与屏幕尺寸和屏幕分辨率有关。以上图的iphone6的为例: 开方(750*750+ 1334*1334)/ 4.7英寸 = 326 ppi
四、位图像素
1个位图像素对应1个物理像素,图片才能得要完美清晰的展现(不失真,不锐化)。要显示宽度为30px*18px(CSS像素)的照片,在DPR为2的情况下,对应的图片需要为60px*36px;DPR为3的情况下,对应的图片需要为90px*54px;基于此种情况,移动端的图片一般需要设计2套,以适应不同的像素比。
五、设备独立像素
设备独立像素是CSS像素和物理像素之间转换的很重要的关键点;在设置了width=device-width时,那么设备独立像素就等于CSS像素;
五、像素比
定义:设备物理像素比上设备独立像素;
公式:devicePixelRatio = 设备物理像素(分辨率) / 设备独立像素(近似CSS像素);
以iphone6plus为例:DPR = 1080 / 414 ≈ 3
通过JS获取:window.devicePixelRatio
通过CSS获取:@media only screen and (-webkit-min-device-pixel-ratio:2){}
六、布局视口(layout viewport)
在移动设备上,为了容纳为电脑浏览器设计的网站,默认的布局视口的宽度远大于移动设备屏幕的宽度;布局视口的出现,在极大程度上帮助了桌面网站到移动设备上的转移。以下是常见的移动端浏览器的布局视口值,单位为px(CSS像素),该值是不可变的(布局视口不变,和性能有关系,如果布局视口变化了,那么就会触发重汇重排),可以通过document.documentElement.clientWidth来获取布局视口值。
当网页的宽度大于以上的值时,就会出现横向滚动条。
在这种情况下,以上面的iphone5为例,宽度占满的时候,需要640个物理像素,换而言之,需要980px的CSS像素,其对应的像素比为:640/980;而对于iphone6而言,宽度占满的时候,需要750个物理像素,换而言之,需要980px的CSS像素,其对应的像素比为:750/980;这里说明了,在没有设置width=device-width的情况下,针对不同的移动设备,该像素比值是变化不固定的,此种情况是难于做适配的。
另一种情况,设置了width=device-width的情况下,即是布局视口的宽度等于设备独立像素,这种情况下,CSS像素就等于设备独立像素了;
七、视觉视口(visual viewport)
用户看到的网站展示区域,一般视觉视口和设备宽度一致。并且它的CSS像素的数量会随着用户缩放而改变,单位是px(CSS像素);该值是可变的(缩放情况下)。可以通过window.innerWidth获取。
八、缩放
1.用户放大:一个CSS像素的面积变大,视觉视口内的CSS像素个数变少,视觉视口的尺寸变小(能看到的内容变少了,所以视觉视口变小);切记,布局视口的大小是不变的,没有设置width=device-width的情况下,布局视口是980px;设置了width=device-width的情况下,布局视口的大小等于设备独立像素。
2.用户缩小:一个CSS像素的面积变小,视觉视口内的CSS像素个数变多,视觉视口的尺寸变多(能看到的内容变多了,所以视觉视口变大);切记,布局视口的大小是不变的,没有设置width=device-width的情况下,布局视口是980px;设置了width=device-width的情况下,布局视口的大小等于设备独立像素。
3.系统缩放:在meta标签中使用initial-scale=1.0,该initial-scale值改变的是布局视口和视觉视口,而width=device-width改变的是布局视口,所以下面的两个例子的效果是一样的;当布局视口超过视觉视口才会出现滚动条,滚动条和视觉视口有关的。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width"> 7 <title>系统缩放1</title> 8 <style media="screen"> 9 *{ 10 margin: 0; 11 padding: 0; 12 } 13 #div1{ 14 width: 187px; 15 height: 200px; 16 background: blue; 17 } 18 </style> 19 </head> 20 <body> 21 <div id="div1"></div> 22 </body> 23 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="initial-scale=1.0"> 6 <title>系统缩放2</title> 7 <style media="screen"> 8 *{ 9 margin: 0; 10 padding: 0; 11 } 12 #div1{ 13 width: 187px; 14 height: 200px; 15 background: blue; 16 } 17 </style> 18 </head> 19 <body> 20 <div id="div1"></div> 21 </body> 22 </html>
initial-scale值的变化对布局视口和视觉视口的影响:在iphone6下,该值变大的时候,CSS元素的面积变大,看到的内容变少了,所以布局视口和视觉是变小了;反之,设置initial-scale为0.5时,布局视口和视觉视口都会变大,变为750.
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="initial-scale=2.0"> 6 <title>系统缩放2</title> 7 <style media="screen"> 8 *{ 9 margin: 0; 10 padding: 0; 11 } 12 #div1{ 13 width: 100px; 14 height: 200px; 15 background: blue; 16 } 17 </style> 18 </head> 19 <body> 20 <div id="div1"></div> 21 </body> 22 </html>
九、width=device-width和initial-scale之间的冲突
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width,initial-scale=0.5"> 6 <title>冲突</title> 7 <style media="screen"> 8 *{ 9 margin: 0; 10 padding: 0; 11 } 12 #div1{ 13 width: 375px; 14 height: 50px; 15 background: blue; 16 } 17 </style> 18 </head> 19 <body> 20 <div id="div1"></div> 21 </body> 22 </html>
如果设置了initial-scale的值为2.0,那么布局视口和视觉视口为187.5px,而width=device-width设置的布局视口大小为375px;谁大听谁的,所以最终的布局视口和视觉视口的大小都是375px。
十、完美视口
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,minimum-scale=1.0,maximum-scale=1.0"/>
width=device-width:设置布局视口的大小等于设备独立像素;
initial-scale=1.0:设置布局视口和视觉视口的大小等于设备独立像素;
user-scalable=no:不允许用户进行缩放;
minimum-scale和maximum-scale分别这只最小的缩放为1.0,最大的缩放为1.0,表示不允许用户进行缩放操作。
以上是关于移动端的视口/像素基本知识的主要内容,如果未能解决你的问题,请参考以下文章