js适配移动端页面

说明:由于vue 脚手架应用的广泛,在适配移动端页面的时候也有许多插件可以引用,

但有的时候不需要使用脚手架来编写,再去引用插件就比较麻烦,没有一段js来的方便,

在这里我就把适配移动端的js放在这,并且说明使用方法,后续也会写出使用脚手架时引入的适配插件

;((doc, win) => {
let _root = doc.documentElement
let resizeEvent = 'orientationchange' in window ? 'orientationchange' : 'resize'
let resizeCallback = () => {
let clientWidth = _root.clientWidth
let fontSize = 10
if (!clientWidth) return
if (clientWidth < 750) {
fontSize = 10 * (clientWidth / 375)
} else {
fontSize = 10 * (750 / 375)
}
_root.style.fontSize = fontSize + 'px'

// if (
// document.activeElement.tagName === 'INPUT' ||
// document.activeElement.tagName === 'TEXTAREA' ||
// document.activeElement.getAttribute('contenteditable') == 'true'
// ) {
// window.setTimeout(() => {
// if ('scrollIntoView' in document.activeElement) {
// document.activeElement.scrollIntoView()
// } else {
// document.activeElement.scrollIntoViewIfNeeded()
// }
// }, 0)
// }
}
if (!doc.addEventListener) return
win.addEventListener(resizeEvent, resizeCallback, false)
doc.addEventListener('DOMContentLoaded', resizeCallback, false)
})(document, window)

量出来的除10,单位写rem

原文地址:https://www.cnblogs.com/lidonglin/p/12069008.html