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源代码如下

22
收起
正在回答
1回答
同学你好,同学的代码是生效的,要通过F12的Elements查看,如下:

通过右键查看源代码,会显示编辑器中的原始代码,代码的修改是看不到的。
同学像老师那样查看修改试试。
祝学习愉快!
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星