h5移动端适配

var adaptive = {}; (function (e, g) { var h = e.document; var b = h.documentElement; var j = e.devicePixelRatio; var i = 1; var c = 1; function k() { var m = /iphone/gi.test(e.navigator.appVersion); if (g.scaleType === 2 && m || g.scaleType === 3) { i = j } e.devicePixelRatioValue = i; c = 1 / i; var p = h.querySelector('meta[name="viewport"]'); var o = "initial-scale=" + c + ", maximum-scale=" + c + ", minimum-scale=" + c + ", user-scalable=no"; if (i === 1) { o = "width=device-width, ".concat(o) } if (!m && i !== 1) { o = o.concat(", target-densitydpi=device-dpi") } if (p) { p.setAttribute("content", o) } else { var n = h.createElement("meta"); n.setAttribute("name", "viewport"); n.setAttribute("content", o); if (b.firstElementChild) { b.firstElementChild.appendChild(n) } else { var q = h.createElement("div"); q.appendChild(n); b.appendChild(q) } } } var f = 100; g.errDpr = 1; function a() { var m; if (g.maxWidth) { m = Math.min(b.getBoundingClientRect().width, g.maxWidth * i) } else { m = b.getBoundingClientRect().width } f = 100 * m / g.desinWidth * (g.errDpr || 1); b.style.fontSize = f + "px"; h.body && (h.body.style.fontSize = g.baseFont / 100 + "rem"); g.setRemCallback && g.setRemCallback(); g.newBase = f } var d; g.desinWidth = 750; g.baseFont = 28; g.reflow = function () { b.clientWidth }; function l() { if (/android/ig.test(e.navigator.appVersion)) { var o = document.createElement("p"); o.style.height = "1px"; o.style.width = "2.5rem"; o.style.visibility = "hidden"; document.body.appendChild(o); var m = o.offsetWidth; var n = g.newBase * 2.5; if (Math.abs(n / m - 1) > 0.05) { g.errDpr = n / m; a() } document.body.removeChild(o) } } g.init = function () { e.addEventListener("resize", function () { clearTimeout(d); d = setTimeout(a, 300) }, false); e.addEventListener("pageshow", function (m) { if (m.persisted) { clearTimeout(d); d = setTimeout(a, 300) } }, false); if (h.readyState === "complete") { h.body.style.fontSize = g.baseFont / 100 + "rem"; l() } else { h.addEventListener("DOMContentLoaded", function (m) { h.body.style.fontSize = g.baseFont / 100 + "rem"; l() }, false) } k(); a(); b.setAttribute("data-dpr", i) }; g.remToPx = function (m) { return m * f } })(window, adaptive); if (typeof module != "undefined" && module.exports) { module.exports = adaptive } else { if (typeof define == "function" && define.amd) { define(function () { return adaptive }) } else { window.adaptive = adaptive } };
window['adaptive'].desinWidth = 640;
window['adaptive'].baseFont = 24;
// window['adaptive'].scaleType = 1; // 1为默认值,可以不用设置
// 显示最大宽度 可选
window['adaptive'].maxWidth = 640;
window['adaptive'].init();

写样式的时候 单位px记得换成rem 100px=1rem
不明白可以查看官网链接:
https://github.com/finance-sh/adaptive

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值