码迷,mamicode.com
首页 > 其他好文 > 详细

适配方案(四)适配的基础知识之单位、分辨率、viewport

时间:2019-11-23 23:34:53      阅读:110      评论:0      收藏:0      [点我收藏+]

标签:inner   com   允许   展示   苹果   tar   前端开发   推荐   通过   

适配的基础知识

一、理解单位

px、pt、pc、sp、em、rem、dpr、dp、dip、ppi、dpi、ldpi、mdpi、hdpi、xhdpi、xxhdpi

  • 如果你是ios开发,你需要了解的单位:pt,px,ppi;实际开发中用到的单位:pt。

  • 如果你是android开发,你需要了解的单位:dip/dp,sp,px,dpi/ppi,ldpi,mdpi,hdpi,xhdpi,xxhdpi;实际开发中用到的单位:dp,sp。

  • 如果你是前端开发,你需要了解的单位:px,em,rem,dpr;实际开发中用到的单位:px,em,rem,dpr

1、dpi / ppi 

dpi:dot per inch ,每英寸的点数;打印或印刷领域使用的单位,代表打印机每英寸可以打印出的点数 。

ppi:pixel per inch ,每英寸的像素数,像素密度;表示图像或者显示器单位面积上像素数量。

dpi和 ppi都是描述分辨率的单位,但是两者是有区别的,但是在描述手机分辨率时,可以认为两者意义相同,以前android设备偏向于使用dpi,ios设备偏向于使用ppi,目前android和ios统一使用ppi描述手机屏幕的像素显示密度。

2、ldpi、mdpi、hdpi、xhdpi、xxhdpi

android对移动设备不同屏幕分辨率的分类

技术图片

3、pt,pc,sp 

pt:磅(point的音译),印刷中使用的表示字型的大小单位,1inch = 72pt (印刷中这个关系成立,ios中不成立),ios开发中使用的逻辑单位,是和设备无关的单位。

pc:印刷中使用的单位,1pc = 12pt,不需要关注。

sp:scale independent pixel ,android设备中用来显示字体大小的,和设备无关的尺寸,当设置字体大小单位为sp时,android系统字体大小会影响设置的字体渲染时的大小。

4、dip / dp

dp/dip: device independent pixel,表示设备独立像素,和设备无关的尺寸,相同的dp/dip值,不同设备展示的效果是一样的。

android使用的单位,之前偏向使用dip,目前建议使用dp。

android设备中,规定160ppi的屏幕,1dp = 1px;320ppi的屏幕,1dp = 2px,所以android设备中dp的计算方法:dp = px * (ppi / 160),这里的px是指设备的物理像素点。和ios开发中用的pt单位类似。

5、px

px:像素,有两种像素概念,一种是网页设计中使用的css像素,一种是原生移动系统使用的物理像素。

作为css像素时,表示的也是一种设备无关单位,与android中使用的dp类似,默认情况下与系统分辨率下的像素大小相同,标清设备中,一个css像素和一个设备物理像素大小相同;在高清设备中,一个css像素可以大于或者等于多个设备物理像素,具体一个css像素,需要多少个物理像素来展示,浏览器会根据dpr计算。

原生移动系统中使用px单位时,表示的就是屏幕的物理像素点,每种屏幕的物理像素点大小可能不一样。

6、dpr

dpr:device pixel ratio, 横向或者纵向设备物理像素数量与设备独立像素数量的比值,浏览器中可以通过window.devicePixelRatio获取(存在兼容性问题)。

对于原生app,ios和android系统会自动根据dpr计算出渲染时需要的px值,最终不同屏幕上展示出来的大小很接近;而移动端页面渲染时想要做到这一点,就必须首先得到设备的dpr,然后再根据dpr计算渲染需要的px值。

ios设备中iphone3的dpr为1;iphone4,5,6,7的dpr为2;iphone6+,7+的dpr为3。iphone6+和iphone7+实际计算出来的dpr应该时2.6左右,但是官方还是建议dpr为3,这是因为ios系统利用了一种“缩减像素采样”算法,自动缩减到2.6。

android设备中dpr值有多种,可知的有0.75,1,1.5,1.75,2,2.5,2.75,3,4等。

二、分辨率

1、手机屏幕分辨率/物理分辨率/原生分辨率

平时说的手机屏幕分辨率,也称为物理分辨率或者原生分辨率,通常包括纵向分辨率和横向分辨率,例如iphone6的物理分辨率是1334 x 750,其中纵向分辨率是1334px,横向分辨率是750px,表示纵向方向可以显示1334个物理像素点,横向上可以显示750个物理像素点,这里描述分辨率使用的px单位,和css中使用的px单位意义不一样,这里代指物理设备的像素点。

2、系统分辨率

还有一种分辨率叫做系统分辨率,例如iphone6的系统分辨率是667 x 375,其中高度是667pt,宽度是375pt,这里描述分辨率使用了pt单位,是一种设备无关单位。

屏幕尺寸相同的设备,物理分辨率越高,ppi也就越大,绝对单位面积上展示的物理像素数量越多,展示图片也就越细腻。

苹果把ppi > 300的屏幕称为视网膜屏,Retina屏。

注:ppi是每英寸的像素数

三、理解viewport

传统桌面web页面布局通常是定宽布局,但是定宽布局的方式对移动端却不适用,原因手机屏幕尺寸大小各异,定宽布局可能在某些手机上出现横向滚动条,导致阅读效果比较差。

为了让手机有更好的网页浏览体验,苹果引入了viewport,为页面提供了一个虚拟的布局窗口,在这个虚拟的布局窗口中渲染页面,然后系统会把渲染好的页面自动缩放到手机屏幕大小。

虽然viewport还没有成为正式的规范,但是现在绝大部分浏览器都支持viewport。

在桌面浏览器中,viewport严格等于浏览器窗口大小,页面渲染时,页面宽度不会超过浏览器的宽度。

移动端屏幕太窄,为了提供更好的页面体验,移动端提供了两种viewport:可视viewport布局viewport

1、可视viewport

可视viewport就是当前屏幕正在展示的区域,也就是移动设备屏幕的宽度,宽高通过window.innerWidth和window.innerHeight获取(存在兼容性问题)。

2、布局viewport

布局viewport页面布局实际用到的viewport,通常比可视viewport要宽,宽高通过document.documentElement.clientWidth和document.documentElement.clientHeight获取。

3、理想viewport

移动端还有一种viewport概念,可以理解为理想viewport,作用就是在理想viewport下,不同移动设备,展示的字体大小接近,并且不需要用户缩放就可以展示全部的页面内容。

理想viewport的宽度默认等于可视viewport的宽度,但是对同一台设备来说,这个理想viewport的宽度是可以改变的,而可视viewport的宽度是不可变的。

如何使用理想viewport来布局页面呢?只需要设置viewport的width等于device-width。

4、viewport属性

viewport的属性,推荐使用以及支持度较广泛的属性只有6个:widthheightinitial-scalemaximum-scaleminimum-scaleuser-scalable

width:设置viewport布局宽度,内核是webkit的浏览器默认值是980px,取值范围在200-10000px,也可以取值为设备宽度device-width(等于横向设备无关像素数量)。

height:设置viewport布局高度,默认值依赖设备长宽比以及宽度值,取值范围在223-10000px,也可以取值为设备高度device-height。

initial-scale:设置初始缩放比例,页面第一次加载时的缩放比例。默认比例依赖于显示密度。在密度低于200 dpi的显示设备上,比例为1.0。在密度介于200及300 dpi之间的显示设备上,比例为1.5。对于具有300 dpi以上密度的显示设备,比例为密度/150 dpi向下取整的结果。取值范围由maximum-scale属性以及minimum-scale属性决定。如果设置initial-scale值为1,width默认是device-width,height默认是device-height

initial-scale设置的缩放大小会改变理想viewport的大小,不会改变可视viewport的大小,也不会改变布局viewport的大小,这是某些适配方案依赖的基本原理,也是解决1px问题的关键。后面分析适配方案时,动态viewport适配方案就依赖这个知识点。

maximum-scale:允许用户缩放到的最大比例,默认值是0.5,范围从0到10.0。

minimum-scale:允许用户缩放到的最小比例,默认值是5.0,范围从0到10.0。

user-scalable:用户是否可以手动缩放,值可以是:yes/true允许用户缩放;no/false不允许用户缩放。

 

适配方案(四)适配的基础知识之单位、分辨率、viewport

标签:inner   com   允许   展示   苹果   tar   前端开发   推荐   通过   

原文地址:https://www.cnblogs.com/kunmomo/p/11920388.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!