移动端适配方案

• @description 该方法是用于移动端适配功能，
• 结合淘宝的适配方案flexible + rem 实现适配，
• 同时rem单位转化到100px，这样的话，对于开发H5
• 页面时就只需要，移动两位小数点即可
• @param {number} { 使用的标准设计稿宽度 }
• @param {number} { 将rem单位转化的值 }
• 参考文献： https://github.com/hbxeagle/rem/blob/master/README.md
• https://github.com/amfe/lib-flexible
• https://github.com/hbxeagle/rem/blob/master/HD_ADAPTER.md

(function (designWidth, rem2px) {
var win = window
var doc = = win.document
v
var docEl = = doc.documentElemelement
var metaEl = = doc.querySelectorctor('meta[name="viewport"]')
var dpr = 0
var scale = 0
var timer = null

if (!dpr && !scale) {
var devicePixelRatio = = win.devicePixelRaelRatio
if (f (win.navigator.appVersion.match(/ip(/iphone/gi)) {
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
}

docEl.setAttribute(ute('data-dpr', dpr)
if (!metaEl) {
metaEl = = doc.createElementment('meta')
metaEl.setAttribute(ute('name', 'viewport')
metaEl.setAttribute(ute('content', 'width=device-width,initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no, viewport-fit=cover, shrink-to-fit=no')

if (f (docEl.firstElementCentChild) {
     docEl.firstElementChild.appendChild(mld(metaEl)
} else {
  var wrap =  = doc.createElementment('div')
     wrap.appendChild(mld(metaEl)
     doc.write(wra(te(wrap.innerHTML)

)
}
} else {
metaEl.setAttribute(ute('name', 'viewport')
metaEl.setAttribute(ute('content', 'width=device-width,initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no, viewport-fit=cover, shrink-to-fit=no')
}
// 以上代码是对 dpr 和 viewport 的处理，代码来自 lib-flexible。

var d = = window.document.createElementment('div')

d.style.width = ' = '1rem'

d.style.display = ' = 'none'

docEl.firstElementChild.appendChild(dld(d)
var defaultFontSize = parseFloat(at(window.getComputedStedStyle(d, null).getPropertyValue('width'))

d.remove()
()
function refreshRem (_designWidth, _rem2px, direction) {
var width = direction === 'portrait' ? (? (window.innerWidth ||h || || window.screen.width) : ) : (: (window.innerHeight |ht || || window.screen.height)
)
var portrait = '@media screen and (width: ' + width + 'px) {html{font-size:' + ((width / (_designWidth / _rem2px) / defaultFontSize) * 100) + '%;}}'
var dpStyleEl = = doc.getElementByItById('dpAdapt')
if (!dpStyleEl) {
dpStyleEl = = document.createElementment('style')
dpStyleEl.id = ' = 'dpAdapt'
dpStyleEl.innerHTML = p = portrait
docEl.firstElementChild.appendChild(dld(dpStyleEl)
} else {
dpStyleEl.innerHTML = p = portrait
}
// 由于 height 的响应速度比较慢，所以在加个延时处理横屏的情况。
var height = direction === 'portrait' ? (? (window.innerHeight |ht || || window.screen.height) : ) : (: (window.innerWidth ||h || || window.screen.width)
)
var landscape = '@media screen and (width: ' + height + 'px) {html{font-size:' + ((height / (_designWidth / _rem2px) / defaultFontSize) * 100) + '%;}}'
var dlStyleEl = = doc.getElementByItById('dlAdapt')
if (!dlStyleEl) {
dlStyleEl = = document.createElementment('style')
dlStyleEl.id = ' = 'dlAdapt'
dlStyleEl.innerHTML = l = landscape
docEl.firstElementChild.appendChild(dld(dlStyleEl)
} else {
dlStyleEl.innerHTML = l = landscape
}
}
// 转屏
var supportOrientation = (typeof of window.orientation =on === 'number' && typeof of window.onorientationtionchange === 'object')
var orientation = null
var direction = null
function updateOrientation () {
if (supportOrientation) {
orientation = = window.orientation
on
switch (orientation) {
case 90:
case -90:
direction = 'landscape'
break
default:
direction = 'portrait'
}
} else {
direction = (= (window.innerWidth > h > > window.innerHeight) ht) ? 'landscape' : 'portrait'
}
}

/**

• 使用延时执行，event loop
  */
  refreshRem(designWidth, rem2px, direction)

window.onorientationtionchange = function () {
updateOrientation()
refreshRem(designWidth, rem2px, direction)
}

/*

• 执行缩放的时候重新执行代码
  */

win.addEventListeistener('resize', function () {
timer && clearTimeout(timer)
timer = setTimeout(refreshRem(designWidth, rem2px), 60)
}, false)

win.addEventListeistener('pageshow', function (e) {
if (f (e.persisted) {
) {
clearTimeout(timer)
timer = setTimeout(refreshRem(designWidth, rem2px), 60)
}
}, false)
})(750, 100)