移动端页面适配 - H5 - 适配

移动端常用的页面适配方案

使用css设置rem根字体大小

1rem = 100px
设计稿宽度: 750px
一屏宽度: 100vw
公式: 根字体大小 = (100 / 750 * 100vw);

html {
  font-size: calc(100 / 750 * 100vw);
}

body {
  font-size: 1rem;
}

使用javascript动态设置rem根字体大小

mode: {
  rem: *css样式使用rem单位
  scale: *css样式使用px单位
  px: *css样式使用px单位
}
designWidth: 设计稿宽度

(function (mode) {
  var win = window
  var doc = document
  var designWidth = 750
  if (/(iPhone|iPad|iPod|iOS|Android|Windows Phone|BlackBerry|SymbianOS)/i.test(navigator.userAgent)) {
    var head = document.getElementsByTagName('head')[0];
    var headMeta = [
      '<meta name="apple-mobile-web-app-capable" content="yes">',
      '<meta name="apple-mobile-web-app-status-bar-style" content="black">',
      '<meta name="format-detection" content="telephone=no">',
      '<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no, minimal-ui" />',
    ]
    for (var i = 0; i < headMeta.length; i++) {
      head.insertAdjacentHTML('beforeEnd', headMeta[i])
    }
    switch (mode) {
      case 'scale':
        head.insertAdjacentHTML('beforeEnd', `<meta name="viewport" content="width=${designWidth}, user-scalable=no, viewport-fit=cover" />`)
        break
      case 'px':
        var resizeEvent = 'orientationchange' in window ? 'orientationchange' : 'resize'
        var setFont = function(){function adaptVP(a){function c(){var c,d;return b.uWidth=a.uWidth?a.uWidth:750,b.dWidth=a.dWidth?a.dWidth:window.screen.width||window.screen.availWidth,b.ratio=window.devicePixelRatio?window.devicePixelRatio:1,b.userAgent=navigator.userAgent,b.bConsole=a.bConsole?a.bConsole:!1,a.mode?(b.mode=a.mode,void 0):(c=b.userAgent.match(/Android/i),c&&(b.mode='android-2.2',d=b.userAgent.match(/Android\s(\d+.\d+)/i),d&&(d=parseFloat(d[1])),2.2==d||2.3==d?b.mode='android-2.2':4.4>d?b.mode='android-dpi':d>=4.4&&(b.mode=b.dWidth>b.uWidth?'android-dpi':'android-scale')),void 0)}function d(){var e,f,g,h,c='',d=!1;switch(b.mode){case'apple':f=(window.screen.availWidth*b.ratio/b.uWidth)/b.ratio;c='width='+b.uWidth+',initial-scale='+f+',minimum-scale='+f+',maximum-scale='+f+',user-scalable=no';break;case'android-2.2':a.dWidth||(b.dWidth=2==b.ratio?720:1.5==b.ratio?480:1==b.ratio?375:.75==b.ratio?240:480),e=window.screen.width||window.screen.availWidth,375==e?b.dWidth=b.ratio*e:750>e&&(b.dWidth=e),b.mode='android-dpi',d=!0;case'android-dpi':f=160*b.uWidth/b.dWidth*b.ratio,c='target-densitydpi='+f+', width='+b.uWidth+', user-scalable=no',d&&(b.mode='android-2.2');break;case'android-scale':c='width='+b.uWidth+', user-scalable=no'}g=document.querySelector('meta[name="viewport"]')||document.createElement('meta'),g.name='viewport',g.content=c,h=document.getElementsByTagName('head'),h.length>0&&h[0].appendChild(g)}function e(){var a='';for(key in b)a+=key+': '+b[key]+'; ';alert(a)}if(a){var b={uWidth:0,dWidth:0,ratio:1,mode:'apple',userAgent:null,bConsole:!1};c(),d(),b.bConsole&&e()}};adaptVP({uWidth:designWidth})}
        setFont()
        win.addEventListener('load', setFont, false)
        win.addEventListener(resizeEvent, setFont, false)
        doc.addEventListener('DOMContentLoaded', setFont, false)
        break
      case 'rem':
        var html = doc.documentElement
        var resizeEvent = 'orientationchange' in window ? 'orientationchange' : 'resize'
        var setFont = function () {
          var clientWidth = html.clientWidth
          html.style.fontSize = 100 * (clientWidth / designWidth) + 'px'
        };
        setFont()
        win.addEventListener('load', setFont, false)
        win.addEventListener(resizeEvent, setFont, false)
        doc.addEventListener('DOMContentLoaded', setFont, false)
        break
    }
  }
})('rem')