移动端适配方案

(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)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 方案一: 最新方案:(隆重推荐) 1、下载MateHandler.js,并引入页面2、head里加入 3、设置bo...
    晨光2016阅读 920评论 0 0
  • html5 AD:百G视频免费分享 移动端越来越被大众所接收,那么相应的技术就越来越向它靠拢,这是一种不可阻挡的趋...
    前端啊啊阅读 311评论 0 0
  • h5的移动端适配核心的问题有两个: 1.因为目前手机品牌众多,手机的宽度不统一,所以第一个问题就是如何让不同的手机...
    国服阅读 3,359评论 0 2
  • 适配:顾名思义,在不同尺寸的手机设备上,页面相对性的达到合理的展示(自适应)或者“保持统一效果的等比缩放” 适配应...
    Imflyer阅读 590评论 0 0
  • 一、大型网站特点: 1、高并发,大流量 2、不间断服务 3、海量数据 4、用户广,网络负责 5、安全环境恶劣 6、...
    mjwz5294阅读 277评论 0 0