vue大屏自适应方法调用

最新推荐文章于 2024-10-08 14:42:54 发布

weixin_45964561

最新推荐文章于 2024-10-08 14:42:54 发布

阅读量414

点赞数 4

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_45964561/article/details/141928595

版权

export function adjustZoom(e, dWidth, dHeight) {
  // debugger
  dWidth = dWidth || 1920;
  dHeight = dHeight || 1080;
  // 设计稿尺寸及宽高比
  const designWidth = dWidth;
  const designHeight = dHeight;
  const designRatio = designWidth / designHeight; // 1.78

  // 当前屏幕的尺寸及宽高比
  const deviceWidth = document.documentElement.clientWidth;
  const devicHeight = document.documentElement.clientHeight;
  const deviceRatio = deviceWidth / devicHeight;

  // 计算缩放比
  let scaleRatio = 1;
  // 如果当前屏幕的宽高比大于设计稿的，则以高度比作为缩放比
  // 如果当前屏幕的宽高比大于设计稿的宽高比，意味着屏幕更宽，则将缩放比设置为设备高度除以设计稿高度
  if (deviceRatio > designRatio) {
    scaleRatio = devicHeight / designHeight;
  } else {
    // 否则以宽度比作为缩放比
    // 否则，屏幕更窄，将缩放比设置为设备宽度除以设计稿宽度
    scaleRatio = deviceWidth / designWidth;
  }
  // console.log(document.documentElement.clientWidth, designWidth, scaleRatio, deviceRatio > designRatio);

  let att = document.createAttribute('class');
  att.value = `screen-adapt`;
  document.body.setAttributeNode(att)
  document.body.style.transform = `scale(${scaleRatio}) translate(-50%, -50%)`;
}
window.addEventListener("resize", adjustZoom);