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

    这篇文章主要介绍了JS和css实现检测移动设备方向的变化并判断横竖屏幕,本文分别给出实现代码,需要的朋友可以参考下

    方法一:用触发手机的横屏和竖屏之间的切换的事件  [自测可用, chrome , 手机360浏览器, 微信浏览器 其他未测试过]

    复制代码代码如下:

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

    // 改变到水平方向

    }

    });

  • 相关阅读:
    Android悬浮窗拖动
    git提交错误问题如何解决?
    STM32单片机使用注意事项
    C指针说明
    cygwin注意事项
    关于百度地图的使用问题
    Android GIS osmdroid地图使用
    三个能力构建人生护城河
    浪潮之醒
    MingGW Posix VS Win32
  • 原文地址:https://www.cnblogs.com/zhongxia/p/5542397.html
Copyright © 2011-2022 走看看