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

    // 改变到水平方向

    }

    });

  • 相关阅读:
    Redis的安装与使用
    jQuery操作input值总结
    jquery获得select option的值和对select option的操作
    jsp弹出新窗口代码
    MyEclipse10.0优化
    MyEclipse安装FreeMarker插件
    增强MyEclipse的代码自动提示功能
    PowerDesigner 技巧【3】
    PowerDesigner 快捷键
    PowerDesigner 技巧【2】
  • 原文地址:https://www.cnblogs.com/zhongxia/p/5542397.html
Copyright © 2011-2022 走看看