移动端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