兼容所有浏览器的js判断横竖屏以及监听事件
我们在做移动端项目的时候,经常会遇到手机旋转的一些事件,对于安卓手机,在QQ和微信中我们可以用下面这行代码禁止浏览器横屏(安卓手机的QQ和微信用的都是X5浏览器):
<meta name="x5-orientation" content="portrait">
UC浏览器强制竖屏:
<meta name="screen-orientation" content="portrait">
但是在iphone里面我们是没办法禁止浏览器横屏,换句话说就是没办法禁止浏览器旋转。
所以我们就需要判断当前处于横屏还是竖屏,并且增加监听事件,当屏幕旋转的时候触发相应的事件。
测试媒体查询
我们可以使用 媒体查询 来实现上述的功能。DOM可以通过程序来获得媒体查询的结果。这是通过 MediaQueryList 接口和它的方法来实现的。要创建 MediaQueryList 对象来存放媒体查询需要使用window.matchMedia 方法。
window.matchMedia
概要
返回一个新的MediaQueryList 对象,表示指定的媒体查询字符串解析后的结果。
语法
screenDirection = window.matchMedia(mediaQueryString)
其中mediaQueryString参数是一个字符串,表示即将返回一个新MediaQueryList对象的媒体查询。针对于我们本文打横竖屏的判断,我们可以按照如下这种方式判断:
var screenDirection = window.matchMedia("(orientation: portrait)");
返回值是:
MediaQueryList
MediaQueryList对象在document上维持着一系列的媒体查询,并负责处理当媒体查询在其document上发生变化时向监听器进行通知的发送。(据此我们就可以检测横竖屏,并且当横竖屏改变的时候触发相应的事件)。
属性
- matches:返回的是一个boolean,为true则表示当前的document匹配media query list也就是上面的mediaQueryString,否则返回false。依然用上面的例子说,返回true则表示处于portrait(竖屏),false则表示处于landscape(横屏)。
- media:表示我们上面例子中的mediaQueryString,例如上面例子
screenDirection.media
等于"(orientation: portrait)"
。 - onChange:该mediaquerylist接口onChange属性是一个事件处理程序属性代表一个函数,调用时的变化的事件触发,即当媒体查询支持改变现状。事件对象是一个mediaquerylistevent实例,这是公认的在旧的浏览器medialistquery实例,向后兼容的目的。下面是一个onChange的例子(可以copy到本地试试看):
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>MediaQueryList</title>
</head>
<body><p></p><script>var para = document.querySelector('p');var mql = window.matchMedia('(max-width: 600px)');mql.onchange = function (e) {if (e.matches) {/* the viewport is 600 pixels wide or less */para.textContent = 'This is a narrow screen — less than 600px wide.';document.body.style.backgroundColor = 'red';} else {/* the viewport is more than than 600 pixels wide */para.textContent = 'This is a wide screen — more than 600px wide.';document.body.style.backgroundColor = 'blue';}}</script>
</body>
</html>
实际效果是:打开屏幕不管多大多小都没有触发任何事件,我们改变屏幕的大小,只有当第一次满足max-width: 600px之后触发onchange 中的true的事件,之后才会触发false的事件,按照官方的说法这是公认的在旧的浏览器medialistquery实例,向后兼容的目的,所以我们还是不用它。
方法
- addListener():在媒体查询列表上增加一个新的监听器,如果列表中已经存在了这个指定的监听器,这个方法将失去作用。
- removeListener():从媒体查询列表中移除一个监听器,如果列表中不存在这个指定的监听器,则这个方法将失去作用。
所以我们可以在MediaQueryList添加addListener()方法,当其横竖屏发生变化的时候执行相应的事件。so完整代码如下:
var screenDirection = window.matchMedia("(orientation: portrait)");screenDirection.addListener(handleOrientationChange);handleOrientationChange(screenDirection);function handleOrientationChange(screenDirection) {if (screenDirection.matches) {/* The device is currently in portrait orientation *//* 竖屏处理事件 */} else {/* The device is currently in landscape orientation *//* 横屏屏处理事件 */}
}
上述代码创建了一个屏幕方向的测试查询列表screenDirection,并且添加了事件监听。需要注意的是,当我们添加监听后,我们其实直接调用了一次监听。这会让我们的监听器以目前设备的屏幕方向来初始化判定代码。然后,我们可以在handleOrientationChange() 方法中来查看查询结果,并且可以设置屏幕方向变化后的逻辑处理代码。
兼容所有浏览器的js判断横竖屏以及监听事件相关推荐
- 监听js变量的变化_JS监听事件型爬虫
点击上方"Python数据科学",选择"星标公众号" 关键时刻,第一时间送达! 作者:zuobangbang 来源:zuobangbang 最近开始研究网页参数 ...
- JS控制全屏,监听退出全屏事件
先放個官方 Web API 接口 链接:全屏 API 网上基本都是这种: //全屏功能document.getElementById("ck_buts").onclick = fu ...
- html鼠标滑轮事件,js鼠标滚轮上下滚动监听事件应用实例(跨浏览器,亲测)
最近做项目涉及到多个DIV切换效果,包括普通按钮点击切换和鼠标滚轮上下滚动切换等:其主要涉及到的内容就是鼠标滚轮上下切换的事件监听,在此记录一下:也希望能帮到各位有需要的朋友. 以下为项目实例: $( ...
- js原生给生成的html添加点击事件,原生js为动态元素添加监听事件
//已存在div //创建标签 function createpage(){ var span=document.createElement('span') span.innerHTML=" ...
- H5 + vue 监听手机屏幕旋转及判断横竖屏
mounted () {// 监听 resize 方法window.addEventListener("resize", this.renderResize, false) }, ...
- esc键退出全屏 vue_解决了VUE在浏览器全屏下监听不到Esc键盘事件
说明: 实测可以在谷歌.火狐.360 浏览器使用 解决了在浏览器全屏下监听不到键盘Esc事件 解决了取消全屏和全屏的同步问题,ESC按键下可以同步 以下是完整的代码, // data() { retu ...
- 解决VUE在浏览器全屏下监听不到Esc键盘事件
实测可以在谷歌.火狐.360 浏览器使用 解决了在浏览器全屏下监听不到键盘Esc事件 解决了取消全屏和全屏的同步问题,ESC按键下可以同步 以下是完整的代码, // data() {return {i ...
- [js] 在设置keyup监听事件后按F5刷新和按浏览器中刷新键刷新有什么区别?
[js] 在设置keyup监听事件后按F5刷新和按浏览器中刷新键刷新有什么区别? 按浏览器中刷新键刷新不会触发keyup事件 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定 ...
- iOS OC与JS交互(WebView监听事件)
在iOS应用的开发过程中,我们经常会使用到WebView,当我们对WebView进行操作的时候,有时会需要进行源生的操作.那么我记下来就与大家分享一下OC与JS交互. 首先先说第一种方法,并没有牵扯O ...
- html js按钮事件监听,JS监听事件
对象 - JS监听事件 ¶ 作者:KK 发表日期:2016.2.21 在准备讲解后面的window对象之前,这里将话题转回来事件这里 平时咱们在一个元素里加个onclick属性,属性值写JS代码,这样 ...
最新文章
- Facebook的实时Hadoop系统
- android 8.0 l2tp问题,【Win】使用L2TP出現809錯誤
- 快速幂模板(java)
- Verilog自编函数clog2替代SV中的系统函数$clog2
- 看苏宁易购的运营保障体系如何hold住818大促
- 家居灯光控制系统设计 android,基于Android的室内照明控制系统设计与实现
- 研发人员为什么留不住
- jQuery地图插件-jqvmap
- nginx第三方模块---nginx-sticky-module的使用(基于cookie的会话保持)
- 强大的图片浏览器---------增强、降低透明度、切换下一张
- 【基础】枚举学习笔记
- js将一篇文章中多个连续的br标签替换成两个连续的br标签
- samba 安装配置部署和优化
- 算法——排序——堆排序图解动画
- 微信小程序新手教程 1.0
- Zigbee物联网应用
- c++程序员书籍推荐
- 一文理解完美二叉树, 完全二叉树和完满二叉树
- 如何快速编写纯CSS菜单?制作CSS精美菜单优化精简代码详细教程
- 条件极值例题_条件极值的求法(函数极值的求法例题)
热门文章
- Keli Linux与网络安全(2)——初探Keli
- sql注入攻击与防御第二章
- 各大主流电子地图坐标拾取系统
- mysql日期范围比较函数_mysql 日期比较函数
- c语言fread参数,C语言fread函数
- 橘子origin游戏平台如何绑定登陆验证/二次验证码?
- Struts框架下定时任务
- 不确定度计算器_内审员、LIMS系统、外部评审员、不确定度、注册计量师、实验数据分析处理、质量控制和期间核查、方法验证和确认 网络培训汇总...
- ad13批量安装元件库_别人的altium designer常用元件库和封装库下载-非常全面初学者有福了...
- 基于RV1126平台imx291分析 --- media部件连接 一