IONIC监听手机横竖屏

    转载自:https://www.2cto.com/kf/201401/272693.html

1.CSS样式横竖屏

@media (orientation: portrait) { } 横屏
@media (orientation: landscape) { }竖屏


<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">横屏
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">竖屏

2.使用addEventListener来添加监听事件

//移动端的浏览器一般都支持window.orientation这个参数,通过这个参数可以判断出手机是处在横屏还是竖屏状态。

从而根据实际需求而执行相应的程序。通过添加监听事件onorientationchange,进行执行就可以了。

 window.addEventListener('orientationchange', function (e) {
      if (window.orientation == 180 || window.orientation == 0) {
        alert("竖屏");
      } else if (window.orientation == 90 || window.orientation == -90) {
        alert("横屏");
      }
    });

      亲测第二种方式有效,第一种方式暂未使用过

猜你喜欢

转载自blog.csdn.net/qq_41868796/article/details/84107281