什么是 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;
};
复制代码

接下来我们就来解释如何使用与读取这些方法和属性。

读取屏幕方向

读取屏幕方向主要通过 typeangle 两个属性,前者返回旋转方向的描述,后者返回旋转的角度

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(转)的更多相关文章

  1. HTML5: Screen Orientation API

    媒体的询问取决于智能手机和平板布局调整的方向一致网站.但有时候你被锁定在一个希腊网站特定方向.横向或纵向.此时,是本机格式可以指定保健应用. APP只显示在一个预设格式-独立于实际设备方向.通过使用H ...

  2. IONIC屏幕方向锁定

    如果希望阻止app在设备旋转时发生横屏,可以使用这个插件: cordova plugin add cordova-plugin-screen-orientation // set to either ...

  3. setRequestedOrientation设置屏幕方向

    void android.app.Activity.setRequestedOrientation(int requestedOrientation)   官方API解释:     Change th ...

  4. android自适应屏幕方向和大小

    一:不同的layout Android手机 屏幕 大小不一,有480x320, 640x360, 800x480.怎样才能让App自动 适应不同的屏幕 呢?      其实很简单,只需要在res目录下 ...

  5. Android中Activity运行时屏幕方向与显示方式详解

    现在我们的手机一般都内置有方向感应器,手机屏幕会根据所处位置自动进行横竖屏切换(前提是未锁定屏幕方向).但有时我们的应用程序仅限在横屏或者竖屏状态下才可以运行,此时我们需要锁定该程序Activity运 ...

  6. iOS如何用代码控制以不同屏幕方向打开新页面?

    转载:http://blogread.cn/it/article/7765?f=wb#original 代码示例:https://github.com/johnlui/Swift-On-iOS/tre ...

  7. UI: 概述, 启动屏幕, 屏幕方向

    UI 设计概述 启动屏幕(闪屏) 屏幕方向 示例1.UI 设计概述UI/Summary.xaml <Page x:Class="Windows10.UI.Summary" x ...

  8. 背水一战 Windows 10 (2) - UI: 概述, 启动屏幕, 屏幕方向

    [源码下载] 背水一战 Windows 10 (2) - UI: 概述, 启动屏幕, 屏幕方向 作者:webabcd 介绍背水一战 Windows 10 之 UI UI 设计概述 启动屏幕(闪屏) 屏 ...

  9. 详解Android中的屏幕方向

    屏幕方向 是对Activity而言的,所以你可以在AndroidManifest.xml 文件中,通过<activity> 标记的screenOrientation 属性进行设定,例如: ...

随机推荐

  1. JS工程师的成长路径

    JS 说起来必须是一个神器,这个当年10天内被开发出来的神器,以一种谁也想象不到的速度快速发展,它击败了Java Applet,逼死Flash,当Android和IOS看似一统全球的时候,JS慢条斯理 ...

  2. mybatis 批量添加数据的两种实现方式

    做开发的这几年期间经常遇到类似处理这种形式数据的问题,也遇到很多刚刚入行的新同学,发现他们做处理这块,经验不够,今天特地整理了一下,大家都会遇到的几种情况,代码也都粘贴出来了,拿去不谢,有时间大家还是 ...

  3. kubernetes集群证书过期之后--转发

    步骤 如果有多master,需要在每个master上进行以下操作. 需要进行以下步骤 重新生成证书 重新生成对应的配置文件 重启docker 和 kubelet 拷贝kubectl 客户端文件 [ro ...

  4. 服务器安装python3环境

    服务器安装python3环境 先安装相关包 yum install zlib-devel bzip2-devel openssl-devel ncurses-devel sqlite-devel re ...

  5. 快速的在linux服务器上安装jdk8

    1.执行命令 yum -y list java* 查看可安装java版本.执行成功后可以看见如下的结果 选择一个java版本进行安装,这里我们希望安装java1.8,因为我们的机器是64位的,所以选择 ...

  6. git远程上的分支到本地

    先想一个自己要在本地新建的分支名称,qianjinyan git checkout -b qianjinyan origin/SELLER-2248-1018 git branch 查看分支 git ...

  7. Vue工程化之引入element-ui框架后图标失效

    场景: vue-cli搭建的工程化项目,引入element框架后发现图标无效,变为方块 解决方案: 在index.html引入样式文件CDN链接即可 <!-- 引入样式 --> <l ...

  8. 使用ArcGIS for Server的Feature Access REST在线编辑图层

    如何启用Feature Access可以参考以前写的一篇博客:http://www.cnblogs.com/oceanking/p/3895257.html 本文主要关注一个全是点的图层,我也不知道学 ...

  9. 201671010417 金振兴 实验十四 团队项目评审&课程学习总结

    项目 内容 软件工程 https://www.cnblogs.com/nwnu-daizh/ 作业要求 https://www.cnblogs.com/sunmiaokun/p/11095027.ht ...

  10. laravel 配置路由 api和web定义的路由的区别详解

    1.路由经过中间件方面不同 打开kerenl.php就可以看到区别 protected $middlewareGroups = [ 'web' => [ \App\Http\Middleware ...