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


    js/css 检测移动设备方向的变化 判断横竖屏幕

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

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

    // 宣布新方向的数值

    alert(window.orientation);

    }, false);

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

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

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

    }, false);

    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="改变到水平方向";

    // 改变到水平方向

    }

    });

  • 相关阅读:
    管理反思(阶段)
    应用软件系统程序员的三个立面
    再优秀那么一点点
    TCP相关时延
    go wiki整理1
    慢就是快
    给自己一点机会
    竞争
    go mem
    币圈再次过年
  • 原文地址:https://www.cnblogs.com/czzblog/p/3678489.html
Copyright © 2020-2023  润新知