vue3+ts+vite使用ResizeObserver API進(jìn)行頁(yè)面檢測(cè)解決pc和移動(dòng)端分為2個(gè)項(xiàng)目

let resizeObserver: ResizeObserver | null = null;
onMounted(() => {

    //判斷尺寸少于1200進(jìn)行強(qiáng)制跳轉(zhuǎn)到移動(dòng)端的官網(wǎng)
    if (document.body.clientWidth < 1200) {
        window.location.replace("");
    }

    // ? 實(shí)時(shí)監(jiān)聽(tīng)寬度變化
    resizeObserver = new ResizeObserver((entries) => {
        const width = entries[0].contentRect.width;
        if (width < 1200) {
            // ? 強(qiáng)制跳轉(zhuǎn)，清除當(dāng)前路由歷史
            window.location.replace("");
        }
    });

    resizeObserver.observe(document.body);
});

onBeforeUnmount(() => {
    
    resizeObserver?.disconnect();
});