移动端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=####上面这句加上的时候  iphone6的  document.documentElement.clientWidth=375

注意：上面这句不加的时候  iphone6的  document.documentElement.clientWidth=####上面这句加上的时候  iphone6的  document.documentElement.clientWidth=375

注意：上面这句不加的时候  iphone6的  document.documentElement.clientWidth=####上面这句加上的时候  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