zoukankan      html  css  js  c++  java
  • js/css 检测移动设备方向的变化 判断横竖屏幕

    最近做的站点是既要电脑各个浏览器能访问,ipad又要能访问,ipad又分几种,又有横竖屏区别,需要考虑的东西还是很多。下面是一些区分横竖屏的代码。


    方法一:用触发手机的横屏和竖屏之间的切换的事件

    window.addEventListener("orientationchange", function() {  
      
    // 宣布新方向的数值  
      
    alert(window.orientation);  
      
    }, false); 
    

      


    // 方法二:监听调整大小的改变

    /* portrait */  
      
    @media screen and (orientation:portrait) {  
      
    /* portrait-specific styles */  
      
    }  
      
    /* landscape */  
      
    @media screen and (orientation:landscape) {  
      
    /* landscape-specific styles */  
      
    }  
    

      

    css判断横竖屏幕

    /* portrait */  
      
    @media screen and (orientation:portrait) {  
      
    /* portrait-specific styles */  
      
    }  
      
    /* landscape */  
      
    @media screen and (orientation:landscape) {  
      
    /* landscape-specific styles */  
      
    }  
    

      

    本地window.matchMedia方法允许实时媒体查询。我们可以利用以上媒体查询找到我们是处于直立或水平视角:

    var mql = window.matchMedia("(orientation: portrait)");
    // 如果有匹配,则我们处于垂直视角
    if(mql.matches) {  
    // 直立方向
    alert("1")
    } else {  
    //水平方向
    alert("2")
    }  
    // 添加一个媒体查询改变监听者
    mql.addListener(function(m) {
    if(m.matches) {
    // 改变到直立方向
    document.getElementById("test").innerHTML="改变到直立方向";
    }
    else {
    document.getElementById("test").innerHTML="改变到水平方向";
    // 改变到水平方向
    }
    });
    

      


  • 相关阅读:
    MVC 4 中 WEB API 选择 返回格式
    用XML配置菜单的一种思路,附一些不太准确的测试代码
    2020.11.15(每周总结)
    2020.11.19
    2020.11.22
    2020.11.21
    2020.11.14
    202.11.13
    2020.11.20
    2020.11.17
  • 原文地址:https://www.cnblogs.com/ericHTML5/p/4645089.html
Copyright © 2011-2022 走看看