JS实现页面横屏时警告/横竖屏切换事件监听

实现代码

原文:JS实现页面横屏时警告/横竖屏切换事件监听

//禁止页面横屏

//因为目前还没有找到强制改变设备横竖屏状态的方法,因此选择了曲线救国

//当横屏时,提醒用户竖屏并屏蔽页面内容

window.addEventListener('orientationchange',function(){

// 这个时候屏幕的尺寸数据还没有变化

var orientation = window.orientation;

  let body = this.document.querySelector("body");

    if(window.orientation != 0){

      alert('这是横屏,请竖屏查看!');

      body.style.display = 'none';

      return;

    }

    if(window.orientation == 0){

      body.style.display = 'block';

      return;

    }

})

监听事件

// 监听屏幕转动 //关键词:orientationchange事件、window的orientation属性

window.addEventListener('orientationchange',function(){

// 这个时候屏幕的尺寸数据还没有变化

var orientation = window.orientation;

    switch(orientation){

        case 90:

        case -90:

            orientation = 'landscape'; //这里是横屏

            break;

        default:

            orientation = 'portrait';//竖屏

    }

})

//orientation有三个数值:0,90,-90

//0表示竖屏,90,-90代表横屏(其实还有个180,代表翻转过来的竖屏,但这种至今未实现)

小结

//获取xo标签attribute属性的值

$(xo).attr(attribute)

//设置attribute属性的值为value

$(xo).attr(attribute, value)

//设置多个attribute属性的值value们

$(xo).attr({attribute1: value1, attribute2: value2})

本文结尾推荐一个前端程序猿们必备的导航网站,里面各种素材在线工具样样齐全,话不多说自己体会吧

上行聚合-开发

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容