一般是设置html的fontsize 为一个合适的值
这里 设置为20rem(界面宽度) 和 微信小程序 一样,可以重用
html 的font-size 就为 clientWidth/20
如下
(0, function () {
if (typeof process !== 'undefined' && !process.browser) {
return
}
const win = window
var rem, scale,
doc = win.document,
html = doc.documentElement,
metaEl = document.querySelector('meta[name="viewport"]'),
baseWidth = metaEl.getAttribute('data-rem') || 20
baseWidth = +baseWidth
function setRem() {
setRemWithNoScale()
// setRemWithScale() 微信公众号 使用缩放有bug
}
function setRemWithScale() {
const clientWidth = html.clientWidth// * window.devicePixelRatio
let dpr = parseInt(window.devicePixelRatio || 1)
rem = clientWidth / baseWidth
scale = 1 / dpr
rem = rem * dpr
html.setAttribute('style', 'font-size:' + rem + 'px !important')
metaEl.setAttribute('content', 'initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale + ',user-scalable=no')
html.setAttribute('data-dpr', dpr)
}
function setRemWithNoScale() {
const clientWidth = html.clientWidth
rem = (clientWidth || 750) / baseWidth
html.setAttribute('style', 'font-size:' + rem + 'px !important')
let dpr = parseInt(window.devicePixelRatio || 1)
html.setAttribute('data-dpr', dpr)
}
setRem()
if (!doc.addEventListener) { return }
//var resizeEvt = 'orientationchange' in win ? 'orientationchange' : 'resize'
//win.addEventListener(resizeEvt, setRem, false)
// doc.addEventListener('DOMContentLoaded', setRem, false)
})()