横竖屏检测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 事件来监听横竖屏的变化


  1. 通过 orientation 来获取当前屏幕的方向角度


  1. 兼容性比较差,https://www.caniuse.com/#sear...


方案二:resize判断宽高



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


window.addEventListener("resize", function(event) {
    _this.innerWidth = window.innerWidth
    _this.innerHeight = window.innerHeight
}, false);


  1. 通过 resize 事件来监听浏览器的宽高变化


  1. 通过比对宽高来判断当前横竖屏状态。


  1. 因为是移动端,所以键盘弹出的时候也会干扰。


  1. 兼容性当然是棒棒的。


方案三: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?'竖屏':'横屏'
    })
}


方案四:媒体查询



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

哈哈,这个方案是我在网上看到的,有可能是那个人不知道 matchMedia 这个 API


或者是 API 有兼容性问题,他自己搞了一个 hack 方法。

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

目录
打赏
0
0
0
1
2
分享
相关文章
数据库技术全攻略:基础、应用与未来趋势
一、引言 在当今数据驱动的时代,数据库技术成为了企业和个人不可或缺的工具
ERP系统中的销售订单管理与订单跟踪解析
【7月更文挑战第25天】 ERP系统中的销售订单管理与订单跟踪解析
865 2
vue3注册添加全局实例属性的方法,如何在setup函数中调用
vue3注册添加全局实例属性的方法,如何在setup函数中调用
1263 2
函数调用与返回的相关指令
理解函数调用与返回的相关汇编指令及递归函数
Convolutional Neural Network,简称 CNN
卷积神经网络(Convolutional Neural Network,简称 CNN)是一种深度学习模型,主要用于图像识别、物体检测、语音识别等任务。CNN 通过局部感知、权值共享和下采样等操作,能够有效地提取图像特征,从而实现对图像的分类和识别。
444 4
179Echarts - 主题河流图(ThemeRiver Lastfm)
179Echarts - 主题河流图(ThemeRiver Lastfm)
153 0
ECS 云服务器使用体验感想
在使用了一周的ecs服务器之后,我有以下的感想。
ECS 云服务器使用体验感想
GIAC-2022sh 学习笔记 | WebAssembly在前端中的应用与展望
GIAC-2022sh 学习笔记 | WebAssembly在前端中的应用与展望
454 0
GIAC-2022sh 学习笔记 | WebAssembly在前端中的应用与展望
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等