移动端的视口/像素基本知识

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,表示不允许用户进行缩放操作。

 

以上是关于移动端的视口/像素基本知识的主要内容,如果未能解决你的问题,请参考以下文章

移动端的vw px rem之间换算

开发移动端页面

mobile_缩放

移动端网页开发所要具备的基础知识二(视口)

移动Web开发基础

移动端viewport基础知识