老师我的代码好像错了，超出那个范围了，大小还在改变。
来源：3-2 通用适配实现
幻城163630
2020-06-12 20:38:26
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1,minimum-scale=1,user-scalable=no">
<title>Document</title>
<style>
*{
padding:0;
margin:0;
box-sizing:border-box;
}
html,body{
width:100%;
height:100%;
}
/* 布局 */
.header-container{
width:100%;
height:2.5rem;
background-color:rgba(222, 24, 27, 0.9);
border-bottom: 1px solid #000;
}
</style>
</head>
<body>
<div class="header-container"></div>
<script>
"use strict;"
var docEl=document.documentElement;
var viewportEl=document.querySelector("meta[name='viewport']");
var dpr=document.devicePixelRatio||1;//获取dpr
var maxWidth=540;//设置最大最小值
var minWidth=320;
dpr=dpr>=3?3:(dpr>=2?2:1);//dpr只能是3,2,1，
docEl.setAttribute('data-dpr',dpr);
docEl.setAttribute('max-width',maxWidth);
docEl.setAttribute('min-width',minWidth);
var scale=1/dpr;
content="width=device-width, initial-scale="+scale+", maximum-scale="+scale+",minimum-scale="+scale+",user-scalable=no";
if(viewportEl){
viewportEl.setAttribute("content",content);
}else{
viewportEl=document.createElement("meta");
viewportEl.setAttribute("name",'viewport');
viewportEl.setAttribute("content",content);
document.head.appendChild(viewportEl);//把viewportEl添加到head元素中
}
function setremUnit(){
var ratio=18.75;
var viewWidth=docEl.getBoundingClientRect().width||window.innerWidth;
// console.log(viewWidth);
if(maxWidth&&(viewWidth/dpr>maxWidth)){
viewWidth=maxWidth*dpr;
console.log(11);
}else if(minWidth&&(viewWidth/dpr<minWidth)){
viewWidth=minWidth*dpr;
console.log(22);
}
document.documentElement.style.fontSize=viewWidth/ratio+"px";
}
setremUnit();
window.addEventListener('resize',setremUnit);
</script>
</body>
</html>
1回答
-
同学你好，代码没有错。
如下所示代码，只是给html标签添加自定义属性，并不会限制页面的宽度，所以不会影响页面的改变
如下所示代码，主要是根据minWidth和maxWidth调整实际的viewWidth的值，并不是说超出范围之后，页面就不会发生改变了。
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
0
相似问题