zoukankan      html  css  js  c++  java
  • JS 获取和监听屏幕方向变化(portrait / landscape)

    移动设备的屏幕有两个方向: landscape(横屏)和portrait(竖屏),在某些情况下需要获取设备的屏幕方向和监听屏幕方向的变化,因此可以使用Javascript提供的 MediaQueryList 对象接口,使用方法如下:

    获取当前屏幕方向(是否是竖屏状态)

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

    打印mql,得到MediaQueryList对象如下:

    可以通过访问对象的 matches 属性来查看查询结果:

    1 if(mql.matches) {
    2     console.log('portrait');   // 竖屏
    3 }else {
    4     console.log('landscape');  // 横屏
    5 }

    监听屏幕方向变化,可以通过 MediaQueryList 对象的 addListener 方法来订阅事件,如下;

     1 var mql = window.matchMedia('(orientation: portrait)');
     2 console.log(mql);
     3 function handleOrientationChange(mql) {
     4     if(mql.matches) {
     5         console.log('portrait');  // 竖屏
     6     }else {
     7         console.log('landscape'); // 横屏
     8     }
     9 }
    10 // 输出当前屏幕模式
    11 handleOrientationChange(mql);
    12 // 监听屏幕模式变化
    13 mql.addListener(handleOrientationChange);

    在浏览器中运行代码,并在手机模式下改变屏幕方向,在控制台中得到打印结果如下:

    从结果可以知道,屏幕方向从原来的竖屏变成了横屏。

    最后,移除订阅者的方法如下:

    mql.removeListener(handleOrientationChange);
  • 相关阅读:
    一些小问题的解决
    JavaScript面向对象的支持
    HTML 5 会为 Flash 和 Silverlight 送终吗?
    Web Forms 2.0 行将被 HTML 5 代替
    XHTML 2: 出师未捷身先死, HTML 5:万千宠爱于一身
    Javascript 技巧大全
    深入了解 HTML 5
    HTML 5 令人期待的 5 项功能
    SQL SERVER 2005中的Schema详解
    VS2008 ,TFS2008破解序列号
  • 原文地址:https://www.cnblogs.com/wx1993/p/5916881.html
Copyright © 2011-2022 走看看