Cordova 插件屏幕方向

17 Mar 2025 | 阅读 2 分钟

这个 Cordova 插件主要用于设备屏幕的方向。它用于为 Windows、iOS 和 Android 平台设置或锁定屏幕方向。这个插件基于屏幕方向 API，因此，API 与当前规范相匹配。

// for the current screen orientation
.orientation
// for locking the screen orientation to portrait mode
.orientation.lock('portrait')
// for unlocking the screen orientation
.orientation.unlock()

安装

要在您的应用中添加此插件，您必须通过键入以下命令来安装它

支持的方向

portrait-primary: 这是一个主要的纵向模式方向。
portrait-secondary: 这是一个次要的纵向模式方向。
landscape-primary: 这是一个主要的横向模式方向。
landscape-secondary: 这是一个次要的横向模式方向。
portrait: 它是纵向主模式或纵向辅模式方向。
landscape: 它是横向主模式或横向辅模式方向。
any: 它支持所有方向（方向已解锁）。

用途

// To lock the screen orientation in portrait mode
screen.orientation.lock('portrait');
// To access the current screen orientation
console.log('Orientation ' + screen.orientation.type);
// To allow a user to rotate a screen
screen.orientation.unlock();

事件

orientationchange 事件从 Android 和 iOS 平台上的 window 对象触发。此插件的当前版本允许用户使用 window 对象来接收通知。

示例

window.addEventListener("orientationchange", function()
{
    console.log(screen.orientation.type); 
});

Android 说明

对于 Android 平台，当设备旋转 180 度时，screen.orientation 属性不会更新。

Windows UWP 说明

当我们谈论 Windows 平台时，Windows-UWP（Windows Store Apps）仅在设备包含某种加速计的情况下才显示更改的方向。它保留在方向的内部状态，但除非设备支持，否则设备屏幕不会旋转。

代码

HTML

<h1>Screen Orientation Lock</h1>
<button class="lock">Lock</button>
<button class="unlock">Unlock</button>
Device Lock State: <select>
  <option value="unlocked">Unlocked</option>
  <option value="landscape-primary">Landscape Primary</option>
  <option value="landscape-secondary">Landscape Secondary</option>
  <option value="portrait-primary">Portrait Primary</option>
  <option value="portrait-secondary">Portrait Secondary</option>
  <option value="portrait">Portrait</option>
  <option value="landscape">landscape</option>
  <option value="any">Any</option>
  <option value="natural">Natural</option>
</select>

JavaScript

var device_fullscreen = {
  request: function(elem){
    if (elem.requestFullscreen) {
      elem.requestFullscreen();
    } else if (elem.msRequestFullscreen) {
      elem.msRequestFullscreen();
    } else if (elem.mozRequestFullScreen) {
      elem.mozRequestFullScreen();
    } else if (elem.webkitRequestFullscreen) {
      elem.webkitRequestFullscreen();
    }
  },
  exit: function() {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
    }
  }
};
var LockOrientationchange = function() {
  console.log('changing')
  if(this.value !== 'unlocked') {
    window.screen.orientation.lock(this.value);
  } else {
    window.screen.orientation.unlock();
  }
};
$('.lock').on('click', function() {
  device_fullscreen.request(this.parentNode);
  LockOrientationchange.call($('select')[0]);
});
$('.unlock').on('click', function() {
   device_fullscreen.exit();
});
$('select').on('change', LockOrientationchange);

输出

下一个主题Cordova 插件启动画面

← 上一个下一个 →

Cordova 插件屏幕方向

安装

支持的方向

用途

事件

示例

Android 说明

Windows UWP 说明

代码

HTML

JavaScript

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

Apache Cordova

Cordova 插件 API

Cordova 插件屏幕方向

安装

支持的方向

用途

事件

示例

Android 说明

Windows UWP 说明

代码

HTML

JavaScript

相关帖子

插件媒体捕获

Cordova 插件启动画面

Cordova 插件文件

Cordova 插件

插件白名单

Cordova 插件媒体

Cordova 插件震动

Cordova 插件地理位置

插件 InAppBrowser

Cordova 存储

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器