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

    方法一:

    本地的window.matchMedia方法允许实时媒体查询。

    代码如下:

      var mql = window.matchMedia("(orientation: portrait)");

      // 如果有匹配,则我们处于垂直视角

      if(mql.matches) {// 直立方向

        alert("1")

      } else {//水平方向

        alert("2")

      }

      // 添加一个媒体查询改变监听者

      mql.addListener(function(m) {

        if(m.matches) {

        // 改变到直立方向

          console.log("改变到直立方向");

        }

        else {// 改变到水平方向

          console.log("改变到水平方向");

        }

      });

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

       代码如下:

      window.addEventListener("resize", function() {

      // 得到屏幕尺寸 (内部/外部宽度,内部/外部高度)

      }, false);

    方法三:jquerymobile框架下使用

    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 */

      }

      

  • 相关阅读:
    ubuntu系统安装初始化脚本
    21_多线程
    20_IO
    19_异常
    18_集合
    17_内部类和常用类
    16_接口
    15_abstract,static,final
    14_面向对象
    13_数组
  • 原文地址:https://www.cnblogs.com/sandy-happyhour/p/4757014.html
Copyright © 2011-2022 走看看