码迷,mamicode.com
首页 > 移动开发 > 详细

移动端web app自适应布局探索与总结

时间:2016-12-05 01:36:15      阅读:351      评论:0      收藏:0      [点我收藏+]

标签:技术   独立   font   动态改变   nts   包括   动态   注意   rip   

要掌握的知识点:

  技术分享

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

 

移动端web app自适应布局探索与总结

标签:技术   独立   font   动态改变   nts   包括   动态   注意   rip   

原文地址:http://www.cnblogs.com/WhiteHorseIsNotHorse/p/6131552.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!