前端自動按比例縮放頁面，使DateV實現在pc端，平板，手機，均可展現看板內容

使用 http://datav.jiaminghi.com/ DataV

問題1 在瀏覽器沒有全屏時 會有部分被遮蓋住 無法查看

 

 

 問題二 同時，使用手機端瀏覽器 平板瀏覽器查看時樣式

 

 

 

 

 

問題1解決方法

添加隱藏滾動條

 

 

 

 

 

 

 

1動態監聽當前頁面可視高度

2.使用element隱藏組件 滾動條 el-scrollbar  https://www.cnblogs.com/aknife/p/14898243.html

<template>
  <div id="data-view">
    <dv-full-screen-container> //dataV容器 第二個問題中將會刪除
    　　<el-scrollbar
      　　 :style="{ height: clientHeight + 'px' }"
      　　 :native="false"
      　　 wrapStyle=""
      　　 wrapClass=""
      　　 viewClass=""
      　　 viewStyle=""
          :noresize="false"
          tag="section"
        >
         <div class="el-scrollbar__wrap_scrollBodyHidden">

           界面內容此處自己寫
    
         </div>
       </el-scrollbar>
     </dv-full-screen-container> 
  </div>
</template>

 

export default {
  name: 'DataView',
  components: { 
  },
  data () {
    return { 
     clientHeight: 1080,//屏幕高度 
    }
  },
  unmounted () { //vue3中為unmounted  vue2中銷毀為destroyed

clearInterval(this .clientHeightTime)

  },
  created () { 
    this.clientHeightTime = setInterval(() => {
      if (this.clientHeight = (document.documentElement.clientHeight < 600 ? 1000 : (document.documentElement.clientHeight < 927 ? 1080 : document.documentElement.clientHeight))) {
        this.clientHeight = (document.documentElement.clientHeight < 600 ? 1000 : (document.documentElement.clientHeight < 927 ? 1080 : document.documentElement.clientHeight))
      }
    }, 500)
　 }
}

樣式

.el-scrollbar__wrap {

  overflow-x: hidden !important;

}

.el-scrollbar__wrap_scrollBodyHidden {

  width: 100%;

  overflow: hidden;

}

 

問題2 解決 在手機端 ipad 保持縮放

1.引入jq  不會自己百度

2.添加 一個js文件 screenAdapt.js 名字自取

import $ from 'jquery'
export default {
  /**
   * 適應屏幕
   */
  screenAdapt () {
    window.global = window;
    (function () {
      if ($(window).width() >= 1920) {
        $(window).width() && $('body').css('width', $(window).width());
        $(window).height() && $('body').css('height', $(window).height());
      } else {
        $(window).width() && $('body').css('width', "1920px");

        var ratio = $(window).width() / (1920 || $('body').width());
        $('body').css({
          transform: "scale(" + ratio + ")",
          transformOrigin: "left top",
          backgroundSize: "100%",
          height: "1080px"
        });
      }
      $('head').append('<meta name="viewport" content="width=' + $(window).width() + '"/>');


      //監聽頁面是否發生改變
      $(window, document).resize(function () {
        resize();
      })


      function resize () {
        if (window.screen.display == 2) { // 等比縮放高度鋪滿
          resizeCenter();
        } else if (window.screen.display == 3) { //全屏鋪滿
          resizeFull();
        } else if (window.screen.display == 4) { //等比縮放高度鋪滿並且可以左右移動
          resizeHeight();
        } else { // 等比縮放寬度鋪滿
          resizeWidth();
        }


      }
      function resizeWidth () {
        window.location.reload()
        if ($(window).width() >= 1920) {
          var ratio = $(window).width() / ($(window).width() || $('body').width());
          $(window).height() && $('body').css('height', $(window).height());
        } else {
          $('body').css('height', "1080px");
        }
        var ratio = $(window).width() / (1920 || $('body').width());
        $('body').css({
          transform: "scale(" + ratio + ")",
          transformOrigin: "left top",
          backgroundSize: "100%"
        });
      }
      function resizeCenter () {
        if (!window.screen.height || !window.screen.width) return resizeCenterBak();
        var ratio = $(window).height() / window.screen.height;


        $('body').css({
          transform: "scale(" + ratio + ")",
          transformOrigin: "left top",
          backgroundSize: 100 * (window.screen.width / $(window).width() * ratio) + "%" + ' 100%',
          backgroundPosition: ($(window).width() - $('body').width() * ratio) / 2 + "px top",
          marginLeft: ($(window).width() - $('body').width() * ratio) / 2
        });
      }


      function resizeHeight () { //
        if (!window.screen.height || !window.screen.width) return resizeCenterBak();
        var ratio = $(window).height() / window.screen.height;


        $('body').css({
          transform: "scale(" + ratio + ")",
          transformOrigin: "left top",
          backgroundSize: 100 * (window.screen.width / $(window).width() * ratio) + "%" + ' 100%',
          backgroundPosition: ($(window).width() - $('body').width() * ratio) / 2 + "px top",
          // marginLeft: ($(window).width() - $('body').width() * ratio) / 2
        });
        $('html').css({
          overflowX: 'scroll',
        })
      }


      function resizeFull () {
        if (!window.screen.height || !window.screen.width) return resizeFullBak();
        var ratioX = $(window).width() / window.screen.width;
        var ratioY = $(window).height() / window.screen.height;


        $('body').css({
          transform: "scale(" + ratioX + ", " + ratioY + ")",
          transformOrigin: "left top",
          backgroundSize: "100% 100%",
        });
      }


      function resizeCenterBak () {
        var ratioX = $(window).width() / $('body').width();
        var ratioY = $(window).height() / $('body').height();
        var ratio = Math.min(ratioX, ratioY);


        $('body').css({
          transform: "scale(" + ratio + ")",
          transformOrigin: "left top",
          backgroundSize: (1 / ratioX) * 100 * ratio + "%",
          backgroundPosition: ($(window).width() - $('body').width() * ratio) / 2 + "px top",
          marginLeft: ($(window).width() - $('body').width() * ratio) / 2
        });
      }
      function resizeFullBak () {
        var ratioX = $(window).width() / $('body').width();
        var ratioY = $(window).height() / $('body').height();


        $('body').css({
          transform: "scale(" + ratioX + ", " + ratioY + ")",
          transformOrigin: "left top",
          backgroundSize: "100% " + ratioY * 100 + "%",
        });
      }
    })();
  }
}

在剛剛前面的頁面中 引入

import screenAdapt from "@/utils/system/screenAdapt"

在created 中添加 

created () {
    screenAdapt.screenAdapt() this.clientHeightTime = setInterval(() => {
      if (this.clientHeight = (document.documentElement.clientHeight < 600 ? 1000 : (document.documentElement.clientHeight < 927 ? 1080 : document.documentElement.clientHeight))) {
        this.clientHeight = (document.documentElement.clientHeight < 600 ? 1000 : (document.documentElement.clientHeight < 927 ? 1080 : document.documentElement.clientHeight))
      }
    }, 500) 
  },

刪除template中DataV容器

<dv-full-screen-container> </dv-full-screen-container>

至此問題解決！！！

展示下效果  這是豎屏效果  橫屏效果更佳

由於添加了滾動 橫屏時部分瀏覽器展示不下的情況下 也可以用手指滾動