H5页面的终端适配

全栈编程
1,970 阅读2分钟

  本文就阿里手淘从2015年到现在所使用的两个主要的终端适配方案进行讨论，首先最早的是flexible方案，通过javascript的方案来实现响应式适配，后来由于viewport单位得到众多浏览器的兼容，flexible这个过渡方案就可以放弃使用了。
  下面就来讲一下这两种方案的实现思路，在移动端布局，我们需要面对两个最为重要的问题：1.各终端下的适配问题。2.视网膜屏的细节处理。

Flexible方案：
  git地址：github.com/amfe/lib-fl…
  在使用flexible方案的时候，我们会在网页中引入一个js脚本，在脚本中实现终端适配的思路主要是：
1.根据dpr的值来修改viewport实现1px的线。
2.将屏幕宽分10份，每份作为html的font-size，从而使用rem实现等比缩放。

下面我们从代码层面来看flexible具体是如何做到的：

var docEI = window.document.documentElement
function refreshRem(){
  var width = docEI.getBoundingClientRect().width
  var rem = width/10
  docEI.style.fontSize = rem + 'px'
}

  其中，通过getBoundingClientRect 这个api来获取了手机屏幕的逻辑像素宽度后，再分成了10份，每份的宽度赋给了document根元素的fontSize，这样在进行网页布局时，就可以通过rem来按照比例进行网页布局。

var dpr = 0
var isAndroid = window.navigator.appVersion.match(/android/gi)
var isIPhone = window.navigator.appVersion.match(/iphone/gi)
var devicePixelRatio = window.devicePixelRatio
if(isIPhone){
    if(devicePixelRatio >= 3 && (!dpr || dpr >= 3)){
        dpr = 3
    }else if(devicePixelRatio >= 2 && (!dpr || dpr >= 2)){
        dpr = 2
    }else{
        dpr = 1
    }
}else{
    dpr = 1
}
scale = 1/dpr

var metaEI = window.document.querySelector('meta[name="viewport"]')
metaEI.setAttribute('content', 'initial-scale=' + scale + ',maximum-scale=' + scale + ',minimum-scale=' + scale + ',user-scalable=no')

  上面的代码中，通过devicePixelRatio来获取设备像素比，再求得scale的值赋给name为viewport的mate标签中的initial-scale和其他两个scale属性，这样在视网膜屏中就可以在通过0.5px来显示1物理像素的线条，看起来更加的细腻。

vw方案：
  flexible的方案终究还是通过js脚本的方式来为rem单位赋值，随着viewport单位得到众多浏览器的兼容，直接通过css实现布局的vw方式得到了越来越多的应用，下面简单介绍下vw的原理：vw是viewport's width的简写，1vw等于window.innerWidth的1%，在样式文件中可以直接使用。
  但是vw方案如何来实现客户端兼容中的1px物理像素问题的呢？我们可以借助postcss-write-svg这个插件通过border-image和background-image来实现，具体参考《再谈Retina下1px的解决方案》（www.jintiankansha.me/t/v2fRaSWoI…

另外分享一个干货满满的公众号：

avatar
文章
阅读
粉丝