/**
* rem适配
* 需要在页面上先写好
* @author 屠佳伟 Mrprince 2019-12-29
* @param {[number]} num 宽度为多少rem. (默认为10)
*/
function remAdaptation(num = 10) {
addEventListener('DOMContentLoaded', function () {
var styleNode = document.createElement('style');
styleNode.innerHTML = 'html{font-size: ' + (document.documentElement.clientWidth / num) + 'px !important;}';
document.head.appendChild(styleNode);
});
}
/**
* viewport 适配
* 需要提前在页面上写好
* <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
* 因为innerWidth等兼容性太差
* 用viewport 适配后,1px 就是1物理像素
* @author 屠佳伟 Mrprince 2019-12-29
* @param {[type]} targetWidth 设计图的宽度
*/
function viewportAdaptation(targetWidth) {
let target = 750;
let viewport = document.querySelector('meta[name=viewport]');
let scale = document.documentElement.clientWidth / target;
viewport.content = `width=device-width, initial-scale=${scale}, maximum-scale=${scale}, minimum-scale=${scale}, user-scalable=no`;
}
/**
* 1物理像素实现
* rem 与原来相同
* 1px 就是1物理像素
* 保留完美视口
* @author 屠佳伟 Mrprince 2019-12-29
*/
function remAndViewportAdaptation(num) {
addEventListener('DOMContentLoaded', function () {
let dpr = window.devicePixelRatio || 1;
var styleNode = document.createElement('style');
styleNode.innerHTML = 'html{font-size: ' + (document.documentElement.clientWidth * dpr / num) + 'px !important;}';
document.head.appendChild(styleNode);
let meta = document.querySelector('meta[name=viewport');
meta.content = `width=device-width, initial-scale=${1 / dpr}, maximum-scale=${1 / dpr}, minimum-scale=${1 / dpr}, user-scalable=no`;
});
}
适配方案
猜你喜欢
转载自www.cnblogs.com/tujw/p/12467586.html
今日推荐
周排行