移动端入门

px：    逻辑像素，浏览器使用的抽象单位

dp,pt：    设备无关像素

dpr：    设备缩放比

计算公式：1px = (dpr)² * dp;

iphone5的dpr=2；

所以，1px由4个dp来渲染

iphone5的屏幕是640dp*1136dp = 320px*568px;

 

二

DPI： 打印机每英寸可以喷的墨汁点（印刷行业）

PPI:   屏幕每英寸的像素数量，即单位区域内的像素密度

目前在计算机显示设备参数描述上，二者的表达意思是一样的

ppi = 根号（1136² + 640²）/4 = 326ppi（视网膜retina屏幕）

注意：计算ppi的时候，只能用硬件相熟，而不是px（逻辑像素）

ppi越高，像素越清晰

可视度越低，系统默认设置的缩放比就越大

 

三、默认缩放比

　　　　　　ldpi　　mdpi　　hdpi　　xdpi

ppi 　　　　120　　160　　  240　   320

默认缩放比　0.75    1.0         1.5       2.0

 

retina屏幕（高清屏）就是dpr>2

 

 

第二节 Viewport

一个PC的页面在移动设备上展示效果是怎样的呢？

<meta name="viewport" content="width=320,initial-scale=1">

ios的viewport普遍都是980px;

android不一定

手机浏览器默认为我们做了两件事:

1、页面渲染在一个980px（px）的viewport里面(android不一定)

2、缩放

意思就是，然呢先排版正确，然后在通过缩放，让你看的正确。

 

viewport有两种：

visual viewport

layout viewport

 可以把手机页面想象为两层，第一个是原始的布局页面，第二个是手机缩放后的页面

也就是说一个在底下，一个在上面的这个关系，暂时可以这么理解

 

想一个问题

设计移动web，为什么不适用默认的980px的布局layout？

因为：

1、宽度不可设置，不同系统不同设备的默认值都可能不同

2、页面缩小版显示，用户体验和交互体验不友好

3、连接不容易被点击到

4、有缩放，缩放后很容易滚动

还有就是，移动的 font-size: 40px 等于 PC上的 12px同等物理大小，不规范。

所以最后可以通过

 

 

<meta name="viewport" content="name=value,name=value" />

来改变我们的默认report

width: 设置布局viewport特定值(device-width)

inital-scale: 设置缩放比

minimum-scale:最少缩放

maximum-scale：最大缩放

user-scalable： 用户自己能否缩放

<meta name="viewport" content="width=device-width"/>

这句话的意思就是布局优化，等于我们的设备宽度

缩放比：window.innerWidh/document.clientWidth;

所以得使缩放比统一一下

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />