zoukankan      html  css  js  c++  java
  • 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="改变到水平方向";

    // 改变到水平方向

    }

    });

  • 相关阅读:
    *Integer to English Words
    *Palindrome Linked List
    *Partition List
    Sort Colors
    wireshark tls
    find 路径必须在表达式之前
    http://mozilla.debian.net/
    maven bundle
    xmpp
    xmlns=""
  • 原文地址:https://www.cnblogs.com/czzblog/p/3678489.html
Copyright © 2011-2022 走看看