orientationchange 屏幕旋转事件

2019-2-15 11:41| 作者: admin| 查看: 29| 评论: 0|来自: 凯博

由于设备的长宽尺寸不同,和用户查看模式(横向/竖向)的切换,页面需要进行相应的调整。

所以需要检测用户查看模式是否发生切换和产生何种切换,orientationChange事件即可实现此功能。

代码片段如下:

[JavaScript] 纯文本查看 复制代码
window.addEventListener("orientationchange", function(ev) {
   //code
}, false);

一旦用户查看模式发生切换就会触发orientationchange。

处理函数传递的事件对象不会提供有价值信息,window.orientation可以检测当前设备处于何种查看模式。

window.orientation具有三个返回值:

(1).0:表示竖屏模式(portrait)。

(2).-90:设备横向旋转到右侧的横屏模式(landscape)。

(3).90:设备横向旋转到左侧的横屏模式(landscape)。

(4).180:设备竖屏模式,但是倒竖着(portrait),当前暂不支持。

图示如下:

a:3:{s:3:\

代码实例如下:

[JavaScript] 纯文本查看 复制代码
function orientationChange() {
  switch(window.orientation) {
    case 0:
      console.log("竖屏");
      break;
    case -90:
      console.log("左旋 -90");
      break;
    case 90:
      console.log("右旋 90");
      break;
    case 180:
      console.log("倒竖 180");
      break;
    };
};

addEventListener("load", function(){
  orientationChange();
  window.onorientationchange = orientationChange;
});

上面代码演示了此事件的简单应用。

上一篇:vw移动端适配

最新评论

返回顶部