我在VUE里的index里面内联了代码,好像没用啊.不知道哪里写错了

我在VUE里的index里面内联了代码,好像没用啊.不知道哪里写错了

    <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>

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

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


正在回答 回答被采纳积分+1

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

4回答
好帮手慕夭夭 2020-06-28 19:23:34

同学你好,给的代码中并没有设置边框之类的,同学把最新测试的代码粘贴给老师,以便老师为你测试。

祝学习愉快~

好帮手慕夭夭 2020-06-28 16:21:29

同学你好,是指的如下没有变化吗?这个是因为测试时,dpr是一样的,所以不会变。

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

如果同学那边浏览器中,可以更改DPR,可以测试改一下,DPR不同才会变哦。如果同学的浏览器中不可以改变DPR也没有关系,这个是生效的。

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

如果指的不是这个,可以详细说一下,以便老师为你解答。祝学习愉快~

  • 提问者 qq_慕妹2226526 #1
    可以更改DPR的,但是我引入了这段视口代码后.再去更改DPR为3,截图边框,还是一样的3像素.我以为没效果
    2020-06-28 18:43:22
  • 提问者 qq_慕妹2226526 #2
    不知道哪里出了问题了.
    2020-06-28 18:43:52
提问者 qq_慕妹2226526 2020-06-28 10:49:31

<!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>


好帮手慕夭夭 2020-06-27 16:37:52

同学你好,代码不全,老师这边没有办法测试。请把全部的代码粘贴到问答区,以便老师准确高效的测试查找问题。

祝学习愉快~

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

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

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

0 星
3.WebAPP开发与小程序
  • 参与学习           人
  • 提交作业       622    份
  • 解答问题       6815    个

微信带火了小程序,也让前端工程师有了更多的展现机会,本阶段带你从移动基础知识的学习到webAPP开发,及小程序开发,让你PC端与移动端两端通吃。

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

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