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

orientationchange事件

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

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

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

调整大小事件

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

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

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

屏幕尺寸

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

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

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

媒体查询

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

1. /* portrait */
2. @media screen and (orientation:portrait) {
3. /* portrait-specific styles */
4. }
5. /* landscape */
6. @media screen and (orientation:landscape) {
7. /* landscape-specific styles */
8. }

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

匹配媒体

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

1. // 寻找匹配
2. var mql = window.matchMedia("(orientation: portrait)");
3.  
4. // 如果有匹配，则我们处于垂直视角
5. if(mql.matches) {
6. // 直立方向
7. } else {
8. //水平方向
9. }
10.  
11. // 添加一个媒体查询改变监听者
12. mql.addListener(function(m) {
13. if(m.matches) {
14. // 改变到直立方向
15. }
16. else {
17. // 改变到水平方向
18. }
19. });

以上是一些建议，我也希望收集更多大家的方法！

以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索事件
， window
， 方向
， 屏幕高度变化
， 检测移动设备
， orientation属性
， orientation
， 水平
， orientationchange
， 方向尺寸
， 移动方向
设备方向
检测移动方向、js检测移动设备、移动信号强度检测设备、php 检测移动设备、局域网检测 移动设备，以便于您获取更多的相关知识。