前端日常笔记

页面等比例缩放的方法

在app.vue里直接粘贴即可使用

// 该方法会让使浏览器无论怎么缩放，或者调整窗口大小，都保持相同的比例，但对系统缩放无效
mounted() {
  // 默认初始加载比例
  document.documentElement.style.zoom = document.documentElement.clientWidth / window.screen.width * 1.1;
  // 监听页面的窗口的变化，每次窗口变化调用等比例缩放方法
  window.addEventListener("resize", this.bodyScale, false);
},

methods: {
  // 页面等比例缩放的方法
  bodyScale() {
    //获取当前分辨率下的可视区域宽度    按屏幕分辨率尺寸放大缩小相应倍数
    document.documentElement.style.zoom = document.documentElement.clientWidth / window.screen.width * 1.1;

/** 

  window.devicePixelRatio 
  获取windows缩放比例，如果浏览器也存在缩放，那这个值等于系统缩放乘浏览器缩放

  element.attachEvent("onresize", this.bodyScale)
  windows系统缩放监听方法

  document.getElementsByTagName('body')[0].style.zoom
  该方法会随着浏览器窗口，缩放和系统缩放，变化而变化

  document.documentElement.style.zoom
  该方法会让使浏览器无论怎么缩放，或者调整窗口大小，都保持相同的比例，但对系统缩放无效

*/

  },
}

vue 字符串\n不生效

方法一：需要添加样式
style="white-space: pre-line;"


方法二：
 <el-table-column
        v-for="(item, index) in tableHeader"
        :key="index"
        :label="item.labelName"
        :prop="item.propName"
        width="180"
        align="center"
        :render-header="renderheader"
      ></el-table-column>
    </el-table>

  methods: {
    renderheader(h, { column, $index }) {
      return h("div", {}, [
        h("div", {}, column.label.split(",")[0]),
        h("div", {}, column.label.split(",")[1]),
      ]);
    },
  },

获取缩放倍数（1*系统缩放倍数*浏览器缩放倍数） 

// 获取缩放倍数（1*系统缩放倍数*浏览器缩放倍数）
function getZoom() {
  let zoom = 1;
  const screen = window.screen,
    ua = navigator.userAgent.toLowerCase();

  if (window.devicePixelRatio !== undefined) {
    zoom = window.devicePixelRatio;
  } else if (~ua.indexOf('msie')) {
    if (screen.deviceXDPI && screen.logicalXDPI) {
      zoom = screen.deviceXDPI / screen.logicalXDPI;
    }
  } else if (window.outerWidth !== undefined && window.innerWidth !== undefined) {
    zoom = window.outerWidth / window.innerWidth;
  }
  return getDecimal(zoom);
}

const getDecimal = (num) => {
  return Math.round(num * 100) / 100;
};

function getAllZoom() {
  // 总缩放倍数
  const zoom = getZoom();
  // 屏幕分辨率
  const screenResolution = window.screen.width;
  // 获取浏览器内部宽度
  const browserWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
  // 浏览器缩放倍数
  // 浏览器外部宽度不受浏览器缩放影响，浏览器内部宽度受影响,所以根据这个可以计算出浏览器缩放倍数（F12调试工具的占位会影响该值）
  const browserZoom = getDecimal(window.outerWidth / browserWidth);
  // 系统缩放倍数
  const systemZoom = getDecimal(zoom / browserZoom);
  // 系统分辨率
  const systemResolution = Math.round(screenResolution * systemZoom);

  console.log('系统分辨率', systemResolution, '屏幕分辨率', screenResolution, '浏览器外部宽度', window.outerWidth, '浏览器内部宽度', browserWidth, '总缩放倍数', zoom, '浏览器缩放倍数', browserZoom, '系统缩放倍数', systemZoom);

  return {
    zoom,
    browserZoom,
    systemZoom,
    systemResolution
  }
}

getAllZoom();