关于移动端屏幕旋转的事件监听

可以通过监听onorientationchange事件来实现,但是,有些浏览器不支持这个事件,此时,可以用resize来模拟。

首先检测一下事件是否存在。

typeof window.onorientationchange === 'object' ? 'orientationchange' : 'resize';

然后就是获取屏幕旋转角度的问题了。

这个也有兼容性问题,一般情况,可以通过screen.orientation.angle来获取,但是呢,有些浏览器在screen下并没有orientation这个属性,这时候,可以使用window下的orientation。所以,为了获取旋转角度,可以这样写。

const angle = screen.orientation ? screen.orientation.angle : window.orientation;

关于角度的值,90和-90表示横屏,0和180表示竖屏。

如果您觉得本文对您有用,欢迎捐赠或留言~
微信支付
支付宝

发表评论

您的邮箱地址不会被公开。 必填项已用 * 标注