cordova实现点击按钮旋转屏幕插件cordova-plugin-screen-orientation

一、关于cordova-plugin-screen-orientation插件:

Cordova插件以iOS,Android和windows-uwp的常用方式设置/锁定屏幕方向。此插件基于Screen Orientation API,因此api与当前规范匹配。

该插件将以下内容添加到屏幕对象(window.screen):

// lock the device orientation
.orientation.lock('portrait')

// unlock the orientation
.orientation.unlock()

// current orientation
.orientation

二、使用方法:

1.安装插件:

cordova plugin add cordova-plugin-screen-orientation

Git 源代码地址:https://github.com/apache/cordova-plugin-screen-orientation

2.指定Orientations 设置宣传角度:

例如设置横屏:

// set to either landscape
screen.orientation.lock('landscape');

// allow user rotate
screen.orientation.unlock();

// access current orientation
console.log('Orientation is ' + screen.orientation.type);

参数说明:

描述字符串 功能
portrait-primary 竖屏主方向
portrait-secondary 竖屏次方向
landscape-primary 横屏主方向
landscape-secondary 横屏次方向
portrait 竖屏方向(primary + secondary)
landscape 横屏方向(primary + secondary)
natural 设备的自然方向
any 锁定四个方向,即锁定当前屏幕方向

3.监听屏幕宣传事件:

screen.orientation.addEventListener('change', function(){
    console.log(screen.orientation.type); // e.g. portrait
});
    // OR
 
screen.orientation.onchange = function(){console.log(screen.orientation.type);
};

三、案例代码:

测试版本:

document.querySelector('.chagerotate').onclick = function () {
    //判断横竖类型,操作切换
    //alert(screen.orientation.type);
    console.info(screen.orientation);
    if (screen.orientation.type.indexOf('landscape') > -1) {
        screen.orientation.lock('portrait-primary').then(function (obj) {
            console.log(obj);
        }, function (obj) {
            console.error(obj);
        });
    } else {
        screen.orientation.lock('landscape-primary').then(function (obj) {
            console.log(obj);
        }, function (obj) {
            console.error(obj);
        });
    }
}

 

更多:

关于Html5的屏幕旋转操作接口介绍

cordova app强制横屏 ,config.xml配置横屏

Cordova 配置文件config.xml常用整理

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章