大屏适配方法

最新推荐文章于 2025-12-02 21:41:05 发布

原创最新推荐文章于 2025-12-02 21:41:05 发布 · 280 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端

一般是用scale(缩放)来完成适配.写在main.ts中

// 多分辨率适配
const refreshScale = () => {

//获得视图宽高
  const docWidth = document.documentElement.clientWidth;
  const docHeight = document.documentElement.clientHeight;

//设置设计图宽高
  const designWidth = 1920,
    designHeight = 1080;

//得到缩放比
  const widthRatio = docWidth / designWidth,
    heightRatio = docHeight / designHeight;

//设置元素缩放  
const appStyle = (document.getElementById("app") as HTMLDivElement).style;
  appStyle.transform = `scale(${widthRatio},${heightRatio})`;
  appStyle.transformOrigin = "left top";
};

//监听屏幕变化 当视图宽高发生变化时调整缩放
refreshScale();
window.onresize = () => {
  refreshScale();
};

如果涉及到网页任务栏和网页全屏的区别化,如非全屏时保留滚动条,根据:任务栏高度 = 浏览器高度 - 页面可用高度

判断有任务栏决定是否将滚动条高度添加到页面高度里面进行调整