zoukankan      html  css  js  c++  java
  • 横竖屏检测 orientation resize matchMedia

    最近有人提需求,产品要适配横竖屏,这就令人头秃了呀。

    这在家办公也不让闲着点。虽然说需求提出来了,但是我们身为一个前端er,还是要有自己的想法呀,我们要统计一波数据看看到底有多少人在横屏使用我们的产品。demo测试地址

    方案一:orientation

    window.addEventListener("orientationchange", function(event) {
        // 等于0或者180竖屏
        // 等于90或者-90度横屏
        _this.eventValue = event.orientation || 
            (screen.orientation && screen.orientation.angle)
    }, false);
    1. 通过 orientationchange 事件来监听横竖屏的变化
    2. 通过 orientation 来获取当前屏幕的方向角度
    3. 兼容性比较差,https://www.caniuse.com/

    方案二:resize判断宽高

    基于上个方案的兼容性,那么我们搞个兼容性好一点的。

    window.addEventListener("resize", function(event) {
        _this.innerWidth = window.innerWidth
        _this.innerHeight = window.innerHeight
    }, false);
    1. 通过 resize 事件来监听浏览器的宽高变化
    2. 通过比对宽高来判断当前横竖屏状态。
    3. 因为是移动端,所以键盘弹出的时候也会干扰。
    4. 兼容性当然是棒棒的。

    方案三:matchMedia 媒体查询

    matchMedia 是什么?

    matchMedia() 可以解析任何一个 css @media 的特性,如 min-height, min-width, orientation 等。

    matchMedia() 返回一个新的 MediaQueryList 对象,表示指定的媒体查询字符串解析后的结果

    MediaQueryList 对象有以下两个属性:

    • media:当前查询的内容,也就是你传入的内容。
    • matches:检测查询结果,如果匹配,则值为 true,否则为 false。

    如何使用

    var mediaQueryList = window
        .matchMedia("screen and (orientation: portrait)");
    if(window.mediaQueryList && mediaQueryList.addListener){
        mediaQueryList.addListener(function(){
            _this.matchMediaAddEvent = 
                mediaQueryList.matches?'竖屏':'横屏'
        })
    }

    vi设计http://www.maiqicn.com 办公资源网站大全https://www.wode007.com

    方案四:媒体查询

    看到这个方案你是不是满头问号。这个方案和上个不一样吗?

    哈哈,这个方案是我在网上看到的,有可能是那个人不知道 matchMedia 这个 API。或者是 API 有兼容性问题,他自己搞了一个 hack 方法。

    原理也是依赖css的媒体查询。只不过他通过定时比对样式来判断当前状态。

  • 相关阅读:
    mybatis中#{}与${}的差别(如何防止sql注入)
    使用Eclipse打开已有工程
    IntelliJ IDEA添加jar包
    【转】mysql 中int类型字段unsigned和signed的区别
    【转】MySQL int转换成varchar引发的慢查询
    数字类型转换函数
    【转】MySQL datetime数据类型设置当前时间为默认值
    【转】拍拍网2015年mysql最新开发规范
    【转】赶集网mysql开发36军规
    【转】再议数据库军规
  • 原文地址:https://www.cnblogs.com/xiaonian8/p/13735680.html
Copyright © 2011-2022 走看看