移动端web app自适应布局探索与总结
要掌握的知识点：
iphone6 屏幕尺寸为 375*667 （pt）也就是 网页 全屏显示时候 document.documentElement.clientWidth------可以理解为屏幕越大这个值越大（但是像素不一定高）
dpr(设备独立像素):2.0 可用（window.devicePixelRatio）得出 （------------像素越高 或者屏幕越小-------dpr越大）
window.devicePixelRatio = 物理像素 / dips
屏幕分辨率为 750*1334 (px) ppi：326
------------------------------------------------------------------------------
对比 sony z2 屏幕尺寸为327*580
dpr(设备独立像素):3.333
在Android中，规定以160dpi为基准，1dp=1px。如果密度是320dpi，则1dp=2px，以此类推
----------------------------------------------------------------------------------------------------------
思考：
有个常见的现象，就是 pc端 一般字体 设置为12px 为正常字体 可以看清楚，但是把这个网页放到手机端游览 字体就会变得很小，为什么？
因为pc端dpr 一般都是1,所以当设置为12px时是 真正的12px，
而 手机端 现在大部分都是高清屏幕
例如， iphone6 dpr=2 那么 pc上12px大小的字体，放到iphone6上就会被缩小两倍，
sony z2 dpr=3.3 所以pc上12px大小的字体，放到z2上就会被缩小3.33倍，
有 dpr=1 的手机吗？
有！
在举例 iphone 3gs
iphone 3gs 屏幕尺寸为 320*480 分辨率 480*320px dpr=1
iphone 4 屏幕尺寸为 320*480 分辨率 960*640px dpr =2
也就是说：pc上12px的字，在iphone3gs 上可以看清，且同pc上字体大小一样，
pc上12px的字，在iphone4 上会缩小两倍，也就是说pc上12px大小的字 在 iphone4上同样大小 得写24px才行（实际不用，请看下文）
有一个div style='多少 px‘ 放到iphone4上 会是宽度全屏 是320px？ 还是 640px?
答案是 640px，
二
<meta name="viewport" content="width=device-width，initial-scale=1,maximum-scale=1, minimum-scale=1">
以上这段做移动端时候都会粘贴进去，（上面讨论的字看不清的情况就不存在了）为什么
device-width的计算公式为：设备的物理分辨率/(devicePixelRatio * scale)------可以理解为 device-width 为手机的屏幕大小
那这时候有一个div style='多少 px‘ 放到iphone4上 会是宽度全屏 是320px？ 还是 640px?
答案是 320px
那么此时可以总结前端设计工作流（网易做法）
1设计师 按照iphone6 像素 设计 750px *1334 px
2 前端
0)
<meta name="viewport" content="width=device-width，initial-scale=1,maximum-scale=1, minimum-scale=1">
注意：上面这句不加的时候 iphone6的 document.documentElement.clientWidth=980####上面这句加上的时候 iphone6的 document.documentElement.clientWidth=375
注意：上面这句不加的时候 iphone6的 document.documentElement.clientWidth=980####上面这句加上的时候 iphone6的 document.documentElement.clientWidth=375
注意：上面这句不加的时候 iphone6的 document.documentElement.clientWidth=980####上面这句加上的时候 iphone6的 document.documentElement.clientWidth=375
1)便于计算
html{
font-size:100px
}
2)那么这个时候想要让宽度全屏只需设置body7.5rem
body{
width: 7.5rem
}
3)动态改变html的font-size
<script>
document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';
</script>
得出结论： iphone6的时候 html的 font-size 为50px ( 375/7.5 +'px' = 50 px. )
body的 宽度为 7.5*50 = 375px 所以全屏了就
)
同理 sony z2 （加上viewport后）document.documentElement.clientWidth = 360 #### 不加的话为document.documentElement.clientWidth = 980
得出结论： sony z2 的时候 html的 font-size 为50px ( 360/7.5 +'px' = 48 px. )
body的 宽度为 7.5*48 = 360px 所以全屏了就
为什么 两个手机 在不加viewport 时候 document.documentElement.clientWidth = 980？
因为当初移动设备兴起，想游览所有网页 包括pc端的网页，那这个时候问题来了，由于手机屏幕太小，网页放置不下，所以出现了视口的概念，并默认为980，这样相当于 （比如一般pc网页视口宽度为1024）告诉游览器 你把1024宽的网页 放到另一个 980宽的是口里，并且要全部显示，所以系统会把网页缩小980/1024 倍。放到980里，当然真实的手机视口可能都没有那么大。比如iphone6 屏幕宽度 只有375 ，为什么当初视口不定位375？ 因为 如果把1024宽的网页 缩放到375宽的屏幕中 要缩小四倍 才能全部显示，这样网页中的内容基本都会太小 而看不清！！
那么我手机视口也定为1024呢？这样倒是不缩放了，网页和pc端一样大，但是会出现横向竖向滚动条太多，游览起来费事，所以定为980 是中间的一个值
总结前端设计工作流（淘宝做法）
举例
0)iphone 6
<meta name="viewport" content="width=device-width，initial-scale=0.5,maximum-scale=1, minimum-scale=1">
2 document.documentElement.clientWidth =750（不是原来的375）
3 html的 font:size = 75px
4 如果想要body横向全屏
body{
width: 10rem
}
参考资料：
http://isux.tencent.com/web-app-rem.html
http://www.cnblogs.com/well-nice/p/5509589.html
http://www.cnblogs.com/dreamlht/p/5112390.html
http://www.chinaz.com/web/2015/1110/468774.shtml#0-tsina-1-17945-397232819ff9a47a7b7e80a40613cfe1
