我在VUE里的index里面内联了代码,好像没用啊.不知道哪里写错了
来源：3-2 通用适配实现
qq_慕妹2226526
2020-06-27 12:48:10
<script>
let WHITH=0;
function setFontsize(){
//获取设备屏幕宽度
if(window.innerWidth){
WHITH=window.innerWidth;
}else if(document.documentElement.clientWidth){
WHITH=document.documentElement.clientWidth;
}else if(document.documentElement.getBoundingClientRect().width){
WHITH=document.documentElement.getBoundingClientRect().width
}
console.log(WHITH);
//计算缩放比
const FontSize=(WHITH / 750) * 40
//获取根元素
let HTML=document.querySelector("html");
HTML.style.fontSize=FontSize+"px";
// --------------------动态改变缩放比-------------------------//
//判断meta标签存在不
if(!document.querySelector('[name=viewport]')){
//获取设备像素比
let dpr= window.devicePixelRatio;
//判断dpr是被否为小数
dpr=dpr>=3?3:(dpr>=2?2:1);
//获取缩放比
dpr=1 /dpr;
//使当前DRP可视化
HTML.setAttribute('data-dpr', dpr);
let content = 'width=device-width,initial-scale=' + dpr + ',maximum-scale=' + dpr + ',minimum-scale=' + dpr +',user-scalable=no';
//创建META标签
let META=document.createElement('meta');
META.setAttribute('name','viewport');
META.setAttribute('content',content);
document.head.appendChild(META);
}
}
//页面加载执行一次
setFontsize();
//页面缩放执行
window.addEventListener("resize",setFontsize);
</script>
4回答
-
好帮手慕夭夭
2020-06-28
同学你好，给的代码中并没有设置边框之类的，同学把最新测试的代码粘贴给老师，以便老师为你测试。
祝学习愉快~
0 -
好帮手慕夭夭
2020-06-28
同学你好，是指的如下没有变化吗？这个是因为测试时，dpr是一样的，所以不会变。
如果同学那边浏览器中，可以更改DPR，可以测试改一下，DPR不同才会变哦。如果同学的浏览器中不可以改变DPR也没有关系，这个是生效的。
如果指的不是这个，可以详细说一下，以便老师为你解答。祝学习愉快~
0h020-06-28 -
qq_慕妹2226526
提问者
2020-06-28
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>vuedemo02</title>
<style>
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
html,body{
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="app"></div>
<script src="/dist/build.js"></script>
<script>
let WHITH=0;
function setFontsize(){
//获取设备屏幕宽度
if(window.innerWidth){
WHITH=window.innerWidth;
}else if(document.documentElement.clientWidth){
WHITH=document.documentElement.clientWidth;
}else if(document.documentElement.getBoundingClientRect().width){
WHITH=document.documentElement.getBoundingClientRect().width
}
console.log(WHITH);
//计算缩放比
const FontSize=(WHITH / 750) * 40
//获取根元素
let HTML=document.querySelector("html");
HTML.style.fontSize=FontSize+"px";
// --------------------动态改变缩放比-------------------------//
//判断meta标签存在不
if(!document.querySelector('[name=viewport]')){
//获取设备像素比
let dpr= window.devicePixelRatio;
//判断dpr是被否为小数
dpr=dpr>=3?3:(dpr>=2?2:1);
//获取缩放比
dpr=1 /dpr;
//使当前DRP可视化
HTML.setAttribute('data-dpr', dpr);
let content = 'width=device-width,initial-scale=' + dpr + ',maximum-scale=' + dpr + ',minimum-scale=' + dpr +',user-scalable=no';
//创建META标签
let META=document.createElement('meta');
META.setAttribute('name','viewport');
META.setAttribute('content',content);
document.head.appendChild(META);
}
}
//页面加载执行一次
setFontsize();
//页面缩放执行
window.addEventListener("resize",setFontsize);
</script>
</body>
</html>
0 -
好帮手慕夭夭
2020-06-27
同学你好，代码不全，老师这边没有办法测试。请把全部的代码粘贴到问答区，以便老师准确高效的测试查找问题。
祝学习愉快~
0h020-06-28
相似问题
回答 3
回答 3