一、关于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);
});
}
}
更多: