浏览器相关知识点

监听浏览器窗口大小发生变化触发事件有哪些？

原生JS: window.addEventListener(''resize",()=>{ 监听浏览器窗口的大小改变})

react:

vue: windowresize方法、watch监听👇、

<script>
export default {
  data() {},

 mounted() { // 必须放在mounted中，因为放在created中未获取dom节点
          this.$nextTick(()=>{
              window.addEventListener('resize', () => {//监听浏览器窗口大小改变
                       //浏览器变化执行动作
              });
          })
 
      },

</script>




// 依据JS里这些方法：
网页可见区域宽：document.body.clientWidth
网页可见区域高：document.body.clientHeight
网页可见区域宽：document.body.offsetWidth (包括边线的宽)
网页可见区域高：document.body.offsetHeight (包括边线的宽)
navigator.platform // 监听判断所使用的浏览器是"Mac" || "X11" || "Linux"

代码如下：
        
        //必须放在mounted中，因为放在created中未获取dom节点
        mounted(){
            //等待dom渲染完毕再加载
            this.$nextTick(()=>{                
                var p = navigator.platform;
                let mac = p.indexOf("Mac") === 0;
                let x11 = (p === "X11") || (p.indexOf("Linux") === 0);
                //判断当前系统
                if(p.indexOf("Win") === 0||mac||x11){
                    //监听缩放
                    window.addEventListener("resize", ()=> {
                       this.commonSySize();
                    })
                    //监听页面加载
                    window.addEventListener('load',()=>{
                        this.commonSySize();
                    })
                }
            });
        }，
 
        methods:{
            //公共使用控制页面大小收缩&&移动端的适配方法（用断点if else的判断）
            commonSySize(){
                let idTag=document.body;
                if(idTag.offsetWidth<808){
                    this.perSonCenterShow=false;
                }
                if(idTag.offsetWidth<678){
                   
                    this.kcSecondDhShow=false;
                }else{
                    this.kcSecondDhShow=true;
                }
                if(idTag.offsetWidth>=809){
                    this.kcSecondDhShow=true;
                    this.perSonCenterShow=true;
                }
            },
        }