自动摘要
正在生成中……
我们在做移动端项目的时候，经常会遇到手机旋转的一些事件，对于安卓手机，在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() 方法中来查看查询结果，并且可以设置屏幕方向变化后的逻辑处理代码。
版权声明：本文为CSDN博主「樊小书生」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/fxss5201/java/article/details/80012084