项目问题

140 阅读1分钟

移动端300ms的延迟问题

由于移动端双击缩放的原因,

image.png

image.png, 大文件上传

# 数据大屏最简单自适应方案,无需适配rem单位

`

   //数据大屏自适应函数
const handleScreenAuto = () => {
    const designDraftWidth = 1920;//设计稿的宽度
    const designDraftHeight = 960;//设计稿的高度
    //根据屏幕的变化适配的比例
    const scale = document.documentElement.clientWidth / document.documentElement.clientHeight < designDraftWidth / designDraftHeight ?
        (document.documentElement.clientWidth / designDraftWidth) :
        (document.documentElement.clientHeight / designDraftHeight);
    //缩放比例
    (document.querySelector('#screen') as any).style.transform = `scale(${scale}) translate(-50%)`;
}

//React的生命周期 如果你是vue可以放到mountd或created中
useEffect(() => {
    //初始化自适应  ----在刚显示的时候就开始适配一次
    handleScreenAuto();
    //绑定自适应函数   ---防止浏览器栏变化后不再适配
    window.onresize = () => handleScreenAuto();
    //退出大屏后自适应消失   ---这是react的组件销毁生命周期,如果你是vue则写在deleted中。最好在退出大屏的时候接触自适应
    return () => window.onresize = null;
}, [])

` 存在问题:地图存在点错位
解决方案:可以用1除于你大屏容器的缩放比例值,让地图缩放到原来该有的大小