s94-web/mjs/s94_rem.js

常用的web工具方法封装---牧人与鱼

var s94_rem = (function (global){
    let document = global?.document;
    if (!document) return console.error('缺少 document 对象！');
    let s94_rem = {
        valueOf(){
            let fontSize = global.getComputedStyle(document.documentElement)['font-size'];
            return parseFloat(fontSize);
        },
        /**设置 viewport 比例
         * @param {Number} scale 设定的值，如果设定的值不合理(小于等于0)，PC默认为1，移动端会参考 devicePixelRatio
         * @returns {s94_rem}
         */
        setScale(scale){
            let is_pc = !/Android|iPhone|iPad/i.test(global.navigator.userAgent);
            scale = parseFloat(scale);
            scale = scale > 0 ? scale : (is_pc ? 1 : 1/global.devicePixelRatio);
            let metas = document.querySelectorAll('meta[name="viewport"]');
            let viewport = metas.length ? metas[metas.length-1] : document.createElement('meta');
            if(viewport.name != 'viewport'){
                viewport.name = 'viewport';
                viewport.content = 'width=device-width,user-scalable=no';
                document.querySelector('head').appendChild(viewport);
            }
            let content = `,initial-scale=${scale},minimum-scale=${scale},maximum-scale=${scale}`;
            viewport.content = viewport.content.replace(/,\s*(initial|minimum|maximum)-scale=[^,]+/g,'') + content;
            return this;
        },
        /**计算rem的值，
         * @param {Number} device_size 设备尺寸基数，如果设备尺寸大于此基数，默认取此基数，默认为640
         * @param {Number} em rem基数，计算的rem值是【rem基数】基于【设备实际尺寸】和【设备尺寸基数】的比例变化的结果
         * @returns {number}
         */
        get(device_size, em){
            var scale = this.scale;
            device_size = (device_size || 640) / scale;
            em = (em || 100) / scale;
            var minWH = Math.min(document.documentElement.clientWidth, document.documentElement.clientHeight, device_size);
            return em * (minWH / device_size);
        },
        display(device_size, em){
            var v = this.get(device_size, em);
            document.documentElement.style.fontSize = v+'px';
            return this;
        }
    }
    Object.defineProperty(s94_rem, 'scale', {
        get(){
            let is_pc = !/Android|iPhone|iPad/i.test(global.navigator.userAgent);
            return is_pc ? 1 : global.outerWidth / global.innerWidth;
        }
    })

    return s94_rem;
})(typeof globalThis !== 'undefined' ? globalThis :
    typeof self !== "undefined" ? self :
        typeof window !== "undefined" ? window :
            typeof global !== "undefined" ? global : {});

export default s94_rem;