JS 获取和监听屏幕方向变化(portrait / landscape)
移动设备的屏幕有两个方向: landscape(横屏)和portrait(竖屏),在某些情况下需要获取设备的屏幕方向和监听屏幕方向的变化,因此可以使用Javascript提供的 MediaQueryList 对象接口,使用方法如下:
获取当前屏幕方向(是否是竖屏状态)
var mql = window.matchMedia("(orientation: portrait)");
打印mql,得到MediaQueryList对象如下:
可以通过访问对象的 matches 属性来查看查询结果:
if(mql.matches) {
console.log('portrait'); // 竖屏
}else {
console.log('landscape'); // 横屏
}
监听屏幕方向变化,可以通过 MediaQueryList 对象的 addListener 方法来订阅事件,如下;
var mql = window.matchMedia('(orientation: portrait)');
console.log(mql);
function handleOrientationChange(mql) {
if(mql.matches) {
console.log('portrait'); // 竖屏
}else {
console.log('landscape'); // 横屏
}
}
// 输出当前屏幕模式
handleOrientationChange(mql);
// 监听屏幕模式变化
mql.addListener(handleOrientationChange);
在浏览器中运行代码,并在手机模式下改变屏幕方向,在控制台中得到打印结果如下:
从结果可以知道,屏幕方向从原来的竖屏变成了横屏。
最后,移除订阅者的方法如下:
mql.removeListener(handleOrientationChange);
JS 获取和监听屏幕方向变化(portrait / landscape)的更多相关文章
- js/jquery 实时监听输入框值变化的完美方案:oninput & onpropertychange
(1) 先说jquery, 使用 jQuery 库的话,只需要同时绑定 oninput 和 onpropertychange 两个事件就可以了,示例代码: $('#username').bin ...
- js监听屏幕方向如何第一次默认不监听
this.supportOrientation = typeof window.orientation === 'number'; // 检查屏幕方向 checkScreenOrientation() ...
- Js/jQuery实时监听输入框值变化
前言 在做web开发时候很多时候都需要即时监听输入框值的变化,以便作出即时动作去引导浏览者增强网站的用户体验感.而采用onchange时间又往往是在输入框失去焦点(onblur)时候触发,有时候并不能 ...
- JS -判断、监听屏幕横竖屏切换事件
通过监听window.orientationchange事件,当横竖屏切换事件时触发 <!doctype html> <html> <head> <title ...
- vue监听页面大小变化重新刷新布局
在项目中由于某些div元素在布局的时候需要初始化宽高,因为当浏览器缩小屏幕的时候需要重新刷新页面视图. 分析思路: 1.在store中创建state,用于保存当前浏览器的宽.高值. 2.在mounte ...
- HTML5 oninput实时监听输入框值变化的完美方案
在网页开发中经常会碰到需要动态监听输入框值变化的情况,如果使用 onkeydown.onkeypress.onkeyup 这个几个键盘事件来监测的话,监听不了右键的复制.剪贴和粘贴这些操作,处理组合快 ...
- 【转载】实时监听输入框值变化的完美方案:oninput & onpropertychange
oninput 是 HTML5 的标准事件,对于检测 textarea, input:text, input:password 和 input:search 这几个元素通过用户界面发生的内容变化非常有 ...
- JS通用事件监听函数
JS通用事件监听函数 版本一 //把它全部封装到一个对象中 var obj={ readyEvent:function (fn){ if(fn==null){ fn=document; } var o ...
- Android 监听屏幕锁屏,用户解锁
在做一个程序的时候,需要时刻保持某一服务是启动的,因此想到了通过监听屏幕SCREEN_ON和SCREEN_OFF这两个action.奇怪的是,这两个action只能通过代码的形式注册,才能被监听到,使 ...
随机推荐
- BZOJ2093 : [Poi2010]Frog
从左往右维护两个指针l,r表示离i最近的k个点的区间,预处理出每个点出发的后继,然后倍增. #include<cstdio> typedef long long ll; const int ...
- c++ string 结束符‘\000’
昨天输出string类型时总是出错,发现输出到文件的一行里多了^@,输出到console却看不到,debug发现,string类型中多了\000,这主要由于我想要用\0截掉字符串最后一位,所以把字符串 ...
- Linux redirect the stdout to a file
1: int save_out = dup(fileno(stdout));//backup stdout 2: int out = open("cout.log", O_RD ...
- 哈希表工作原理 (并不特指Java中的HashTable)
1. 引言 哈希表(Hash Table)的应用近两年才在NOI中出现,作为一种高效的数据结构,它正在竞赛中发挥着越来越重要的作用. 哈希表最大的优点,就是把数据的存储和查找消耗的时 ...
- 【wikioi】1285 宠物收养所
题目链接:http://www.wikioi.com/problem/1285/ 算法:Splay 刚开始看到这题,就注意到特征abs了,并且数据n<=80000显然不能暴力,只能用nlgn的做 ...
- SHell string操作 转
本文也即<Learning the bash Shell>3rd Edition的第四章Basic Shell Programming之读书笔记之二,但我们将不限于此. String操作 ...
- iOS中--NSArray调用方法详解 (李洪强)
下面的例子以 NSArray *array = [NSArray arrayWithObjects:@"wendy",@"andy",@"to ...
- 《GK101任意波发生器》升级固件发布(版本:1.0.2build690)
一.固件说明: 硬件版本:0,logic.3 固件版本:1.0.2.build690 编译日期:2015年4月24日 ====================================== 二. ...
- Java类型相互转换byte[]类型,blob类型
在我们的程序开发当中,经常会用到java.sql.Blob.byte[].InputStream之间的相互转换,但在JDK的API当中,又没有直接给我们提供可用的API,下面的程序片段主要就是实现它们 ...
- ci调用application/views下的css,js,图片资源出现You don't have permission to access CodeIgniter on this server解决
原因是view文件下面有个.htaccess文件,里面写的是 Deny from all //拒绝所有请求 自己本地测试的话,就直接去掉,放到服务器就指定application/views文件 ...