屏幕方向读取与锁定:Screen Orientation API(转)
什么是 Screen Orientation API
Screen Orientation API 为 Web 应用提供了读取设备当前屏幕方向、旋转角度、锁定旋转方向、获取方向改变事件的能力。使得特定应用在屏幕方向方面增强用户体验,如视频和游戏。该标准目前处于工作组草案状态,最近一个修改为 1 月 29 日。
浏览器支持情况
属性结构
Screen Orientation API 通过在 Screen
接口上扩展属性 orientation
为我们提供该 API 的所有功能:
partial interface Screen {
[SameObject] readonly attribute ScreenOrientation orientation;
};
复制代码
ScreenOrientation 的定义如下:
[Exposed=Window]
interface ScreenOrientation : EventTarget {
Promise<void> lock(OrientationLockType orientation);
void unlock();
readonly attribute OrientationType type;
readonly attribute unsigned short angle;
attribute EventHandler onchange;
};
复制代码
接下来我们就来解释如何使用与读取这些方法和属性。
读取屏幕方向
读取屏幕方向主要通过 type
和 angle
两个属性,前者返回旋转方向的描述,后者返回旋转的角度
angle
angle
属性代表了以设备的自然位置开始,逆时针方向上所旋转的角度。如将手机逆时针旋转90度变为横屏,那么此时 angle
则返回 90 。
type
type
属性主要通过描述来表达屏幕的旋转方向,type
的返回值总共有四个,对应着四个不同的旋转方向:
portrait-primary
:竖屏状态并且旋转角度为 0 度,也就是设备的自然位置
portrait-secondary
:竖屏状并且即旋转角度为 180 度,也就是倒着拿的位置
landscape-primary
:横屏状态并且旋转角度为 90 度
landscape-secondary
:横屏状态并且旋转角度为 180 度
锁定屏幕方向
出于一些安全方面的考虑,锁定方向时必须使页面处于全屏状态
锁定
锁定屏幕通过 lock
方法,调用 lock
方法需要传入锁定的方向描述字符串,随后该方法会返回一个 Promise。
描述字符串 | 功能 |
---|---|
portrait-primary | 竖屏主方向 |
portrait-secondary | 竖屏次方向 |
landscape-primary | 横屏主方向 |
landscape-secondary | 横屏次方向 |
portrait | 竖屏方向(primary + secondary) |
landscape | 横屏方向(primary + secondary) |
natural | 设备的自然方向 |
any | 锁定四个方向,即锁定当前屏幕方向 |
Example:
async function lockPortrait() {
// 首先进入全屏模式
await document.documentElement.requestFullscreen();
// 锁定竖屏方向
await screen.orientation
.lock('portrait')
.catch(e => alert(e.message));
}
复制代码
解锁
解锁不需要额外参数,只需要调用 unlock
即可:
function unlock() {
screen.orientation.unlock();
}
复制代码
屏幕方向改变事件
通过为 onchange
赋值或通过 addEventListener
都可以添加事件监听:
function rotationChange() {
console.log('rotation changed to:', screen.orientation.type);
}
screen.orientation.addEventListener('change', rotationChange);
复制代码
小结
透过本文,其实要使用这个 API 并不困难,并且在某些场景下,我们还能直接通过 lock
方法改变屏幕的旋转方向,提升浏览体验。并且移动端上的 Chrome 和 FIrefox 支持得很好,可以考虑在你的下一个项目中使用。
文章来源:
屏幕方向读取与锁定:Screen Orientation API(转)的更多相关文章
- HTML5: Screen Orientation API
媒体的询问取决于智能手机和平板布局调整的方向一致网站.但有时候你被锁定在一个希腊网站特定方向.横向或纵向.此时,是本机格式可以指定保健应用. APP只显示在一个预设格式-独立于实际设备方向.通过使用H ...
- IONIC屏幕方向锁定
如果希望阻止app在设备旋转时发生横屏,可以使用这个插件: cordova plugin add cordova-plugin-screen-orientation // set to either ...
- setRequestedOrientation设置屏幕方向
void android.app.Activity.setRequestedOrientation(int requestedOrientation) 官方API解释: Change th ...
- android自适应屏幕方向和大小
一:不同的layout Android手机 屏幕 大小不一,有480x320, 640x360, 800x480.怎样才能让App自动 适应不同的屏幕 呢? 其实很简单,只需要在res目录下 ...
- Android中Activity运行时屏幕方向与显示方式详解
现在我们的手机一般都内置有方向感应器,手机屏幕会根据所处位置自动进行横竖屏切换(前提是未锁定屏幕方向).但有时我们的应用程序仅限在横屏或者竖屏状态下才可以运行,此时我们需要锁定该程序Activity运 ...
- iOS如何用代码控制以不同屏幕方向打开新页面?
转载:http://blogread.cn/it/article/7765?f=wb#original 代码示例:https://github.com/johnlui/Swift-On-iOS/tre ...
- UI: 概述, 启动屏幕, 屏幕方向
UI 设计概述 启动屏幕(闪屏) 屏幕方向 示例1.UI 设计概述UI/Summary.xaml <Page x:Class="Windows10.UI.Summary" x ...
- 背水一战 Windows 10 (2) - UI: 概述, 启动屏幕, 屏幕方向
[源码下载] 背水一战 Windows 10 (2) - UI: 概述, 启动屏幕, 屏幕方向 作者:webabcd 介绍背水一战 Windows 10 之 UI UI 设计概述 启动屏幕(闪屏) 屏 ...
- 详解Android中的屏幕方向
屏幕方向 是对Activity而言的,所以你可以在AndroidManifest.xml 文件中,通过<activity> 标记的screenOrientation 属性进行设定,例如: ...
随机推荐
- 如何将一个div盒子水平垂直都居中?
html代码如下: 固定样式: 方法一:利用定位(常用方法,推荐) .parent{ position:relative; } .child{ position:absolute; top:50%; ...
- UIDatePicker基本使用
UIDatePicker提供了一个快速选择日期和时间的控件,他是UIControl的子类,专门用于日期时间的选择.其样式可以通过UIDatePicker的属性进行灵活设置,同时也可以获取到当前UIDa ...
- 网络编程系统化学习(1.1.)--socket基础
大纲 学完该阶段内容,你将会很好的完成如下的面试题 socket面试试题相关: 1.写一个简单的socket程序,实现客户端发送数据,服务端收到数据后,将该内容转发给客户端 2.简要概述一下socke ...
- Appium的测试简单流程
1.环境的搭建:jdk,SDK,appium,手机模拟器(夜神模拟器) 2.appium的运作流程图: 图中的流程步骤简单来说是: 1.测试脚本写入appium: 2.appium创建连接,将脚本利用 ...
- Laravel - Method [xxx] does not exist on [xxx]
The controller is existing, and the method 'test' exist on 'App\Http\Controllers\Admin\IndexControll ...
- Java的常见术语(PO/POJO/VO/BO/DAO/DTO)
PO(persistant object) 持久对象在o/r 映射的时候出现的概念,如果没有o/r映射,就没有这个概念存在了.通常对应数据模型(数据库),本身还有部分业务逻辑的处理.可以看成是与数据库 ...
- Httpd服务入门知识-Httpd服务常见配置案例之定义路径别名
Httpd服务入门知识-Httpd服务常见配置案例之定义路径别名 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.创建测试数据 [root@node101.yinzhengj ...
- Mirai 通过弱密码爆破摄像头 形成僵尸网络——尼玛值得深思的是作者居然是做安全研究的
Mirai(日语:ミライ[1],中文直译“未来”[2][3])是一款恶意软件,它可以使运行Linux的计算系统成为被远程操控的“僵尸”,以达到通过僵尸网络进行大规模网络攻击的目的.Mirai的主要感染 ...
- datagrid 文本溢出时候 鼠标经过出现提示信息tooltip
1只有文本溢出的单元格鼠标经过才显示提示信息 $('.datagrid-cell').mouseover(function () { if (this.offsetWidth < this.sc ...
- windows下的批处理bat文件和Linux下的shell文件的互相转换
shell(Linux.Solaris) bat(windows) 含义 # rem 注释行 /[directory]/[directory]/.../[directory]/ [disk]:\[di ...