Mate标签既不会添加也不会修改?

Mate标签既不会添加也不会修改?

全部代码。

(function () {
    "use strict";
    const MAX_WIDTH = 540;
    const MIN_WIDTH = 375;

    //获取dpr
    let dpr = window.devicePixelRatio;
    dpr = Math.max(Math.round(dpr), 1);

    console.log(dpr);

    //处理Dpr
    handleDpr();

    //处理Rem
    handleRem();


    function handleDpr() {

        //dpr在移动设备中大小
        let mbDpr = 1 / dpr;

        //viewport content
        let content = `width=device-width,initial-scale=${mbDpr},minimum-scale=${mbDpr},maximum-scale=${mbDpr},user-scalable=no`;
        let docl = document.documentElement;

        docl.setAttribute("data-dpr", dpr);
        // 获取mate带viewport的元素
        let viewPostMate = document.querySelector('meta[name="viewport"]');
        if (viewPostMate) {
            console.log(content, 2);
            viewPostMate.setAttribute("content", content)
        } else {
            // 添加新的mate到header
            let newMate = document.createElement("mate");
            newMate.setAttribute("name", "viewport")
            newMate.setAttribute("content", content)
            let sd = document.head.appendChild(newMate);
            console.log("添加的元素为什么没有展示", sd);
        }

    }

    function handleRem() {
        //初始化rem
        handleRootFontSize();

        //监听布局宽高发生改变
        window.addEventListener("resize", handleRootFontSize)

        /**
         * 处理root Html的fontSize
         */
        function handleRootFontSize() {
            let clientWidth = document.documentElement.getBoundingClientRect().width ||
                window.innerWidth || document.clientWidth;
            console.log("clientWidth", clientWidth);
            if (clientWidth) {
                clientWidth = Math.min(clientWidth, MAX_WIDTH * dpr);
                clientWidth = Math.max(clientWidth, MIN_WIDTH * dpr);
            }

            console.log("maxWidth", (MAX_WIDTH * dpr));
            console.log("minWidth", (MIN_WIDTH * dpr));

            let rem = clientWidth / 18.75;
            document.documentElement.style.fontStyle = rem;
        }
    }
})();

默认的html结构

图片描述

打印日志如下

图片描述

HTML源代码如下

图片描述

正在回答

登陆购买课程后可参与讨论,去登陆

1回答

同学你好,同学的代码是生效的,要通过F12的Elements查看,如下:

http://img1.sycdn.imooc.com//climg/5fe57c7609dc188513550378.jpg

通过右键查看源代码,会显示编辑器中的原始代码,代码的修改是看不到的。

同学像老师那样查看修改试试。

祝学习愉快!

问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师