横竖屏检测 orientation resize matchMedia

更新日期: 2020-02-13阅读: 1.9k标签: 屏幕

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

这在家办公也不让闲着点。虽然说需求提出来了,但是我们身为一个前端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?'竖屏':'横屏'
    })
}


方案四:媒体查询

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

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

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

微信公众号:前端linong

链接: https://www.fly63.com/article/detial/8190

JS,Jquery获取各种屏幕的宽度和高度

这篇文章介绍了JS和jquery获取各种屏幕的宽度和高度的代码,有需要的朋友可以参考一下:网页可见区域宽: document.body.clientWidth,网页可见区域高: document.body.clientHeight

Js如何判断元素是否在屏幕可视范围内

假设目标元素:#element,该元素相对于文档顶部的偏移距离,获取该元素的高度.那应该如何确定元素在可见区域内呢?假设当元素的上边框刚好出现在浏览器的底部时(零界点)

js监听屏幕方向如何第一次默认不监听

家有时候有需求在屏幕方向改变的时候重新执行某个渲染函数,以获取方向改变后的实际宽高,但是首次加载的执行函数要在其他地方执行,这时候可以加一个flag的状态值,默认为false

Vue移动端右滑屏幕返回上一页

有些时候我们玩手机更喜欢使用手势滑动带来的用户操作体验。Vue touch directive是一个用于移动设备操作指令的轻量级的VUE组件。使用它可以轻松实现屏幕触控、滑动触发事件,提高用户体验

20行JS代码实现屏幕录制

在开发中可能有遇到过屏幕录制的需求,无论是教学、演示还是游戏录制,都需要通过屏幕录制来记录和分享内容。一般在App内H5页基于客户端能力实现的较多,现在浏览器中的 MediaRecorder 也提供了这种能力

判断元素是否在可视范围内

getBoundingClientRect会受到transform的影响。比如你的元素设置了transform:scale(2), 那么getBoundingClientRect返回的width会是元素实际宽度的2倍,top等位置信息也会因为元素尺寸变化而发生变化.

当我遇见了强制横屏签字的需求...

在前一阶段的工作中,突然接到了这个需求:手写签批的页面在移动端竖屏时强制页面横屏展示进行签字,一开始我觉着只要将页面使用 CSS3 的 transform 进行 rotate 一下就可以了

如何保持屏幕常亮_Js实现设备保持唤醒状态

JavaScript 中的一些新功能非常值得期待,唤醒锁定 API 就是其中之一。它允许我们与主机系统进行交互,可以帮助开发人员使用 JavaScript 指示操作系统保持屏幕唤醒状态!

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!