除非你的应用程序限定了只在移动设备直立状态或水平状态下使用，一般情况下，你需要调整一些设定。即便你设计的布局流畅时尚，你可能需要改变某些编程代码。通常有以下一些小的策略用于检测移动设备方向的改变。

orientationchange事件

你等待一个移动API，一个简单的窗口orientationchange事件：

// 监听方向的改变
window.addEventListener("orientationchange", function() {
// 宣布新方向的数值
alert(window.orientation);
}, false);

发生改变的时候， window.orientation属性就改变。值为0表示直立, 90表示设备水平旋转到左边, -90表示设备水平旋转到右边。

调整大小事件

有些设备不支持orientationchange事件，但可以触发resize事件：

// 监听调整大小的改变
window.addEventListener("resize", function() {
// 得到屏幕尺寸 (内部/外部宽度，内部/外部高度)
}, false);

跟orientationchange事件比起来较不明显，但也是很好用的。

屏幕尺寸

有一些属性可以从window对象恢复，以获取屏幕尺寸及我认为的“虚拟”屏幕大小：

外部宽度，外部高度：真正不动的象素（而不是320×356iPhone直立像素）
内部宽度，内部高度：虚拟不动的象素（而不是320×356iPhone直立像素）

当然，这些数据不能告诉你方向的变化，需要通过简答的数学计算，你就知道现在的窗口状态是更宽了还是更高了。

媒体查询

你还可以通过CSS媒体查询判定方向：

/* portrait */
@media screen and (orientation:portrait) {
/* portrait-specific styles */
}
/* landscape */
@media screen and (orientation:landscape) {
/* landscape-specific styles */
}

更聪明的做法是，用JavaScript编写一个循环的”watcher” ，用以检查一个块的背景颜色，并触发你自己的方向改变。

匹配媒体

本地window.matchMedia方法允许实时媒体查询。我们可以利用以上媒体查询找到我们是处于直立或水平视角：

// 寻找匹配
var mql = window.matchMedia("(orientation: portrait)");// 如果有匹配，则我们处于垂直视角
if(mql.matches) {
// 直立方向
} else {
//水平方向
}// 添加一个媒体查询改变监听者
mql.addListener(function(m) {
if(m.matches) {
// 改变到直立方向
}
else {
// 改变到水平方向
}
});

转载于:https://www.cnblogs.com/kt520/p/5681608.html

移动端中如何检测设备方向的变化？相关推荐

js／css 检测移动设备方向的变化判断横竖屏幕
js/css 检测移动设备方向的变化判断横竖屏幕方法一:用触发手机的横屏和竖屏之间的切换的事件 window.addEventListener("orientationchange&qu ...
html input font size,在移动端中Input大小随着font-size而变化
项目里准备做一个模仿支付宝6位密码输入框,做完在谷歌浏览器上模拟,没有任何问题,附图如下: 因为密码输入框小黑点太小了,所以我把font-size调到了50px,在电脑网页上也是一切运行正常,但是当我 ...
Unity使用陀螺仪检测屏幕方向
using UnityEngine;/// <summary>检测设备方向</summary> public class CheckDeviceOrientation : Mo ...
小程序—这款工具把加速计、陀螺仪、设备方向的调试痛点解决了
之前在一篇博文中捎带介绍过这款工具,反响很好,还收到了两位用户的打赏,但受那篇博文的影响,并没有被广大小程序开发者所熟知,故写一篇专门的,希望能有更多用户不再被加速计.陀螺仪.设备方向的调试难题再刺痛 ...
swift3 设置设备方向支持(supportedInterfaceOrientations)
1.改变整个app的设备方向支持 2.代码改变app不同场景的设备旋转方向支持(可以在不同的viewController中处理对设备方向的不同需求) ps.supportedInterfaceOrie ...
Swift3检测设备是否为iPad Portrait模式
2019独角兽企业重金招聘Python工程师标准>>> 检测设备方向变化, API变化真快, 讨论热烈. http://stackoverflow.com/questions/256 ...
android 检测屏幕方向,在android中检测屏幕方向
试试这个: 首先实现SensorEventListener并获得RotationSensor sensorManager = (SensorManager)getActivity().getSyste ...
论文篇 | 2020-Facebook-DETR ：利用Transformers端到端的目标检测=＞翻译及理解（持续更新中）
论文题目:End-to-End Object Detection with Transformers 2020 论文复现可参考:项目复现 | DETR:利用transformers端到端的目标检测_夏 ...
军用式计算机标准总线,计算机总线技术在军用航空地面检测设备中的应用分析.pdf...
会议论文,完美pfd格式计算机总线技术在军用航空地面检测设备中的应用分析谢文俊严东超雷晓辑吕永健 (空军工程大学工程学院,陕西,西安710038) 摘要:结合军用航空地面检测设备的实际需求,分析比 ...

移动端中如何检测设备方向的变化？