mylomen-server/static/js/event/impl/RSizeEventImpl.js

"use strict";
define(function (require, exports, module) {

    function handle(e) {
        const ctx = require("../../common/ctx");
        let historyScreenW = ctx.screenWidth;
        let curScreenW = ctx.getScreenWidth();
        if (historyScreenW === curScreenW) {
            return
        }

        //调整
        refreshEditFrontSize()
        refreshRootFrontSize();

        //更新
        ctx.screenWidth = ctx.getScreenWidth();
        ctx.screenHeight = ctx.getScreenHeight();
    }

    /**
     * 刷新跟节点 front-size for 全局盒子尺寸
     * @constructor
     */
    function refreshRootFrontSize() {
        const ctx = require("../../common/ctx");
        const utils = require("../../common/utils");
        let designWidth = ctx.designWith;
        let curDoc = document.documentElement;//当前文档的 root 元素
        let curClientW = ctx.getScreenWidth();
        if (!curClientW) {
            curClientW = designWidth;
        }

        //纸张
        if (curClientW >= designWidth) {
            ctx.MyRoot().style.width = designWidth + "px";
        } else {
            ctx.MyRoot().style.width = "100%";
        }

        let dpr = utils.GetDpr();
        //set 1rem = curClientW / designWidth (支持响应式)
        let nowFrontSize = '1px';
        if (ctx.isTablet || ctx.isMobile || ctx.isIOS || ctx.isAndroid) {
            nowFrontSize = (curClientW / designWidth) * dpr + 'px';
        } else {
            nowFrontSize = (curClientW / designWidth) + 'px';
        }

        console.log(
            "\nuserAgent: ", window.navigator.userAgent,
            "\nisTablet: ", ctx.isTablet,
            "\nisMobile: ", ctx.isMobile,
            "\nisIOS: ", ctx.isIOS,
            "\nisAndroid: ", ctx.isAndroid,
            "\nwindow.innerWidth: ", window.innerWidth,
            "\ngetScreenWidth: ", ctx.getScreenWidth(),
            "curClientW : ", curClientW,
            "\ndesignWidth: ", designWidth,
            "\n1rem =  ", nowFrontSize,
            "\nnowFrontSize: ", nowFrontSize);
        // curDoc.style.fontSize = dpr * nowFrontSize;

        curDoc.style.fontSize = nowFrontSize;
        // let testDiv = document.getElementById("testDevice");
        // testDiv.innerText += "\ncurClientW: " + curClientW;
        // testDiv.innerText += "\ndesignWith: " + designWidth;
        // testDiv.innerText += "\n1rem =: " + nowFrontSize;
        // testDiv.innerText += "\nwindow.screen.width =: " + window.screen.width;
        // testDiv.innerText += "\nwindow.screen.height =: " + window.screen.height;
        // testDiv.innerText = testDiv.innerText +
        //     // "\n navigator_userAgent :" + navigator.userAgent.toLocaleLowerCase() +
        //     "\n isMobile :" + /mobi|android|iphone|ipad|ipod/i.test(navigator.userAgent.toLocaleLowerCase()) +
        //     "\n isIOS :" + /iphone|ipad|ipod/.test(window.navigator.userAgent.toLocaleLowerCase()) +
        //     "\n isAndroid :" + /android/.test(window.navigator.userAgent.toLocaleLowerCase()) +
        //     "\n window.width :" + window.innerWidth +
        //     "\n curClientW :" + curClientW +
        //     " \n designWidth: " + designWidth +
        //     "\n 1rem =  " + nowFrontSize;

    }


    function refreshEditFrontSize() {
        const ctx = require("../../common/ctx");
        const utils = require("../../common/utils");
        let curClientW = ctx.getScreenWidth();
        if (!curClientW) {
            return
        }
        //字体尺寸 https://www.shejidaren.com/zihao-daxiao-sheji-bilv.html
        //12～72 px 建议最大字体是48px

        let dpr = utils.GetDpr();

        let myEditFrontSize = document.getElementById("myEdit_main");
        if (ctx.isTablet) {
            myEditFrontSize.style.fontSize = ctx.editFrontSize * dpr + 'px';
        } else {
            myEditFrontSize.style.fontSize = ctx.editFrontSize + 'px';
        }

        //show
        let curMyFontSizeEl = document.getElementById("cur_my_font_size");
        curMyFontSizeEl.textContent = ctx.editFrontSize + "px";
        //更新默认值
        let liList = curMyFontSizeEl.parentElement.nextElementSibling.querySelectorAll("ul li");
        for (let i = 0; i < liList.length; i++) {
            let tmpLi = liList[i];
            if (tmpLi.getAttribute("data-my-style-v") === ctx.editFrontSize) {
                tmpLi.setAttribute("data-my-select", "true");
                tmpLi.setAttribute("data-my-select-v", tmpLi.parentElement.getAttribute("data-my-select-v"));
            } else {
                tmpLi.removeAttribute("data-my-select");
            }
        }
    }


    //导出
    exports.handle = handle;
    exports.refreshEditFrontSize = refreshEditFrontSize;
});