参考
android dp dpi
深入了解viewport和px
一、单位
1.Px（Pixel像素）
不同设备显示效果相同。这里的“相同”是指像素数不会变，比如指定UI长度是100px，那不管分辨率是多少UI长度都是100px。也正是因为如此才造成了UI在小分辨率设备上被放大而失真，在大分辨率上被缩小。
2.Screen Size（屏幕尺寸）
一般所说的手机屏幕大小如1.6英寸、1.9英寸、2.2英寸，都是指的对角线的长度，而不是手机面积。我们可以根据勾股定理获取手机的宽和长，当然还有面积。
3.Resolution（分辨率）
指手机屏幕垂直和水平方向上的像素个数。比如分辨率是480*320，则指设备垂直方向有480个像素点，水平方向有320个像素点。
4.Dpi（dots per inch像素密度）
dpi是密度，即屏幕每英寸所包含的像素数。比如一个手机屏幕宽2英寸长3英寸，分辨率320*480，则密度是160dpi.
5.dp、dip：
dp和dip都是Density Independent Pixels的缩写，密度独立像素，可以想象成是一个物理尺寸，使同样的设置在不同手机上显示的效果看起来是一样的。在Android中，规定以160dpi为基准，1dp=1px。如果密度是320dpi，则1dp=2px，以此类推。
我们重构移动页面的时候使用px其实跟安卓开发中使用dp是一样的，有个背后的系数会帮我们把数值适配到这款手机的大小。而这个系数就是上图的1x、2x、3x……这个系数怎么来？是依靠分辨率和屏幕尺寸计算到的屏幕像素密度，再看屏幕像素密度属于哪个系数等级。
苹果和安卓对应系数
二、viewpoint
参考前端如何适配手机屏幕之viewport
手机浏览器是把页面放在一个虚拟的“窗口”（viewport）中，窗口可大于或小于手机的可视区域，一般手机默认viewport大于可视区域。这样不会破坏没有针对手机浏览器优化的网页的布局，用户可以通过平移和缩放来看网页的其他部分。
部分机型默认viewport大小
<meta name='viewport' content='width=device-width,height=device-height,
initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no'/>
该meta标签的作用是让当前viewport的宽度等于设备的宽度，同时不允许用户手动缩放。也许允不允许用户缩放不同的网站有不同的要求，但让viewport的宽度等于设备的宽度，这个应该是大家都想要的效果，如果你不这样的设定的话，那就会使用那个比屏幕宽的默认viewport，也就是说会出现横向滚动条。
网页重构时使用的单位px，就是通常所说的像素，是网页设计中使用最多的长度单位。将显示器分成非常细小的方格，每个方格就是一个像素（这和我们理解的屏幕分辨率的1920px1080px的px是不同的）。不同设置下，方格的大小不一样。例如iPhone4S如果不设置viewport，他就会默认是980px，就像把屏幕分成980份（不是屏幕分辨率的640px哦！）。如果设置一个元素为100px100px，看起来就是屏幕的100/980**
例如iPhone4S如果设置viewport width=device-width，他就会是320px，就像把屏幕分成320份（不是屏幕分辨率的640px哦！）。如果设置一个元素为100px*100px，看起来就是屏幕的100/320
未设置viewport，弹出来的都是设备的默认宽度，基本是980px，除了最后一台三星老爷机是800px。设置了viewport，width=device-width，弹出来的是设置好的宽度，375px、360px、320px。为什么是这个大小？这就要用到上面讲的知识点了。
iPhone6的屏幕分辨率是1334750px，ppi是326，所以系数是2x。那device-width就等于750/2=375px。
红米1s的屏幕分辨率是1280720px，ppi是312，所以系数是2x。那device-width就等于720/2=360px。
三星note4的屏幕分辨率是2560*1440px，ppi是515，所以系数是4x。那device-width就等于1440/4=360px，和小米的divice-width一样大小。但是看起来左边的红色块明显大于右边，因为左边的设备大啊，虽然两者都是分成360份，但是明显左边的1份比右边的1份大。
以上解释了为什么给元素赋予固定的像素值，给字体16px的大小，在大部分手机里居然能看起来差不多大小，也明白了我们并不需要写其他尺寸来适配不同的屏幕大小。
三、API
参考CSSOM视图模式(CSSOM View Module)相关整理
基于screen.width的伪响应式开发
1.window.innerWidth和document.body.clientWidth
//参考Laya.Broswer.as
/**
* 浏览器窗口可视宽度。
* 通过分析浏览器信息获得。浏览器多个属性值优先级为：
* window.innerWidth(包含滚动条宽度) > document.body.clientWidth(不包含滚动条宽度)，
* 如果前者为0或为空，则选择后者。
*/
public static function get clientWidth():Number {
__init__();
return window.innerWidth || document.body.clientWidth;
}
public static function get clientHeight():Number {
__init__();
return window.innerHeight || document.body.clientHeight || document.documentElement.clientHeight;
}
通过上面Laya源码注释，可以看出innerWidth是包含滚动条的，而clientWidth不包含滚动条。laya封装到Broswer.clientWidth,优先去取innerWidth。不过到了get clientHeight方法，后面又多出document.documentElement.clientHeight，为什么get clientWidth没有加？
关于这一点，为什么window.innerHeight和document.body.clientHeight的值会不一样呢也做出相同解释
你打开缩小窗口使得横纵都出现滚动条，会发现window.inner宽高总是比document.body.client宽高（firefox是document.documentElement.client宽高）多一个固定值（这个和各个浏览器有关）.
你把窗口拉大到滚动条消失（由于网页一般不止一屏那么长，所以纵向实验不好做，可以选百度或谷歌首页），再查询，会发现二者一致了。
2.判断横屏竖屏
参考HTML5中判断横屏竖屏
//判断手机横竖屏状态：
window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() {
if (window.orientation === 180 || window.orientation === 0) {
alert('竖屏状态！');
}
if (window.orientation === 90 || window.orientation === -90 ){
alert('横屏状态！');
}
}, false);
//移动端的浏览器一般都支持window.orientation这个参数，通过这个参数可以判断出手机是处在横屏还是竖屏状态。
在laya当中，根据xiaosong的回复：
你可以在游戏里监听下onresize事件，然后根据Browser.clientWidth和Browser.clientHeight的比例来判断当前的手机方向是横屏还是竖屏！
3.window.screen
以下参考怎样用 JavaScript 准确获取手机屏幕的宽度和高度
screen对象包含了显示设备的信息。
screen.height：显示设备的高度，单位为像素。
screen.width：显示设备的宽度，单位为像素。
以上两个属性，除非调整显示设备的分辨率，否则看作是常量，不会发生变化。
首先要了解下不会说谎的screen.width，screen.width顾名思义就是屏幕的宽度，对，屏幕的宽度，与显示器宽度没有任何关系，就算你把显示器宽度缩小到芝麻糊那么大，screen.width还是不会变。
网友评论