禁止横竖屏切换、强制横竖屏

最新推荐文章于 2024-10-07 10:40:01 发布

举个栗zi

最新推荐文章于 2024-10-07 10:40:01 发布

阅读量9.2k

点赞数 1

分类专栏： js 文章标签： javascript

js 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

本文介绍了一个使用JavaScript来检测设备屏幕方向的方法，包括横屏和竖屏，并提供了针对不同设备如iPad、Android及iPhone的具体实现。此外，还展示了如何通过HTML5的屏幕旋转事件来禁用或强制设置屏幕方向。

摘要由CSDN通过智能技术生成

js判断屏幕横竖屏：

function orient() {
    //alert('gete');
    if (window.orientation == 0 || window.orientation == 180) {
        $("body").attr("class", "portrait");
        orientation = 'portrait';
        return false;
    }
    else if (window.orientation == 90 || window.orientation == -90) {
        $("body").attr("class", "landscape");
        orientation = 'landscape';
        return false;
    }
}

$(function(){
    orient();
});

$(window).bind( 'orientationchange', function(e){
    orient();
});

ipad： 90 或 -90 横屏

ipad： 0 或180 竖屏

Andriod：0 或180 横屏

Andriod： 90 或 -90 竖屏

iphone 、ipad禁止横竖屏切换、强制横竖屏：

html5屏幕旋转事件 onorientationchange

// 判断屏幕是否旋转

function orientationChange() {
    switch(window.orientation) {
    　　case 0: 
            alert("肖像模式 0,screen-width: " + screen.width + "; screen-height:" + screen.height);
            break;
    　　case -90: 
            alert("左旋 -90,screen-width: " + screen.width + "; screen-height:" + screen.height);
            break;
    　　case 90:   
            alert("右旋 90,screen-width: " + screen.width + "; screen-height:" + screen.height);
            break;
    　　case 180:   
        　　alert("风景模式 180,screen-width: " + screen.width + "; screen-height:" + screen.height);
        　　break;
    };
};

// 添加事件监听
addEventListener('load', function(){
    orientationChange();
    window.onorientationchange = orientationChange;
});