屏幕方向API已重新加载

9月,我发表了一篇题为“ 介绍屏幕方向API ”的文章,这并不奇怪地讨论了屏幕方向API。 此API 提供了以下功能:读取屏幕方向状态,在此状态发生变化时得到通知以及将屏幕方向锁定为特定状态。 正如我在文章中提到的那样, Screen Orientation API处于早期阶段,因为它是W3C工作草案。 当前的规范可能会在几个月后被较新的版本取代。 你猜怎么了? 它发生了! 实际上,最新版本的Chrome(38)和Opera(25)支持新版本的规范(Firefox最多33仍支持旧版本)。

在本文中,我将重点介绍这两个规范版本之间的重要区别,以便您可以随时了解最新信息。

什么是屏幕方向API?

在我们开始研究新规范之前,我想向您简要回顾一下此API的含义以及您为什么要使用它。 Screen Orientation API使您能够检测用户设备的方向(纵向和横向)并锁定应用程序所需的模式。 该规范指出,作为安全性条件,仅当页面处于全屏模式时,用户代理(读取浏览器)才可以允许锁定屏幕。 从今天开始,所有现代浏览器都要求您这样做,因此,如果要使用Screen Orientation API,则应牢记这一点。

如果您是我的文章的追随者,并且还记得该API的上一篇文章,很遗憾地通知您,只有一般概念是相同的,并且几乎所有内容都已更改。 具体而言,所有方法,属性和事件均已移至新对象下和/或重命名。 不过不要害怕,我会解释您需要的一切。

物产

在以前的版本中,API是通过window.screen属性公开的。 新版本已经移动了它里面所有的orientation属于财产window.screen 。 在当前版本中, orientation是一个对象,而不是返回设备以前方向的属性。

此属性包含以下只读属性:

  • type :一个字符串,其中包含设备的当前方向(稍后将详细介绍其可能的值)。
  • angle :一个数字,指定设备当前的方向角度。

type可以采用以下值之一:

  • portrait-primary :方向为主要纵向模式。 对于智能手机,此值表示它处于垂直位置,而按钮在底部。
  • portrait-secondary :方向为次要肖像模式。 对于智能手机,此值表示它处于垂直位置,并且按钮在顶部(设备在下方)
  • landscape-primary :方向是在主要横向模式下。 对于智能手机,此值表示它处于水平位置,并且按钮在右侧。
  • landscape-secondary :方向为次要风景模式。 对于智能手机,此值表示它在水平位置,左侧的按钮。

当设备处于纵向基本模式时,似乎自然会认为angle为0,但这并非总是如此。 规范建议不要在屏幕方向类型和屏幕方向角度之间假设任何跨设备的关系,因为角度为0表示仅设备处于自然方向。 例如,处于纵向模式的智能手机,其按钮朝向地面。

方法

在先前的规范中,我们具有lockOrientation()unlockOrientation() 。 在新版本中,它们分别被重命名为lock()unlock() 。 毫不奇怪,它们执行相同的动作。 lock()将设备的屏幕锁定在一个或多个方向(取决于参数),而unlock()则将屏幕解锁。

下面显示了这两种方法的使用示例:

// Lock the screen in landscape-primary mode
screen.orientation.lock('landscape-primary');

// Unlock the screen
screen.orientation.unlock();

下图显示了调用此代码段的第一条语句的结果:

设备定向API的实际应用
屏幕方向API起作用。 该设备在物理上处于纵向模式,但屏幕就像在横向一样。

lock()方法已被大量更改,因此请仔细阅读。 它仅接受一个字符串来指定我们要锁定屏幕的方向,并且返回的值不再是布尔值,而是Promise对象 。 如果您需要JavaScript承诺的简介,SitePoint可以为您提供JavaScript承诺概述 。 最后,您可以传递两个新的可能值来锁定: anynatural 。 您可以传递的值的完整列表如下所示:

  • any :可以将设备锁定在可以假定的任何方向。 实际方向取决于设备,例如,不能将Samsung Galaxy S3纵向锁定(上下颠倒)。
  • natural :设备处于自然方向。 对于智能手机,这通常意味着处于其主要人像模式(按钮朝着地面的方向)。
  • portrait-primary :方向为主要纵向模式。 对于智能手机,此值表示它处于垂直位置,而按钮在底部。
  • portrait-secondary :方向为次要肖像模式。 对于智能手机,此值表示它处于垂直位置,并且按钮在顶部(设备在下方)
  • landscape-primary :方向是在主要横向模式下。 对于智能手机,此值表示它处于水平位置,并且按钮在右侧。
  • landscape-secondary :方向为次要风景模式。 对于智能手机,此值表示它在水平位置,左侧的按钮。

unlock()方法用于释放先前设置的锁,与以前的版本相比,该方法没有更改。

大事记

该API还提供了每次屏幕方向更改时都会触发的事件。 您可以如下所示监听此change事件:

window.screen.orientation.addEventListener('change', function() {
   // do something here...
});

浏览器兼容性

从上个月开始,随着Chrome 38和Opera 25的发布,对Screen Orientation API的支持有所改善。到目前为止,Chrome 38和Opera 25实施了该API的新版本,仅在其移动版本中没有任何供应商前缀:Chrome for Android和适用于Android的Opera。 Firefox最高版本为33(本文时为最新版本),使用其供应商前缀( moz )支持规范的旧版本。 Internet Explorer 11也使用其供应商前缀( ms )支持旧版本。

请注意,目前Firefox暴露出两个导致浏览器崩溃的问题。 您可以在https://bugzil.la/1061372https://bugzil.la/1061373上找到更多信息。

由于规范的两个版本是如此不同,因此您必须学习如何对它们进行检测。 以下代码显示了如何执行此操作:

var orientation = screen.orientation    ||
                  screen.mozOrientation ||
                  screen.msOrientation  ||
                  null;

if (orientation === null) {
   // API not supported
} else if (typeof orientation === 'object') {
   // new versions supported
} else {
   // old versions supported
}

演示版

我们将要开发的演示是我们上一篇文章中构建的演示的重构版本。 它由一个HTML页面组成,该页面显示文本,该文本指示屏幕的当前方向以及支持的角度。 然后,您可以通过使用选择框来选择要锁定屏幕设备的方向。 如您所见,选择框还包含旧版本不支持的值。 如果浏览器支持旧版本,则将通过JavaScript删除这些值。

在JavaScript代码内部,我们检测浏览器是否支持此API。 另外,我们将检查版本和使用的前缀(如果有)。 在此演示中,出于本文前面解释的原因,我们还将使用Fullscreen API。

您可以在下面找到该演示的完整代码,但也可以在线使用它

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
      <meta name="author" content="Aurelio De Rosa">
      <title>Screen Orientation API Demo by Aurelio De Rosa</title>
      <style>
         *
         {
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
         }

         body
         {
            max-width: 500px;
            margin: 2em auto;
            padding: 0 0.5em;
            font-size: 20px;
         }

         h1
         {
            text-align: center;
         }

         .api-support
         {
            display: block;
         }

         .hidden
         {
            display: none;
         }

         .value
         {
            font-weight: bold;
         }

         .button-demo
         {
            padding: 0.5em;
            margin: 1em;
         }

         .author
         {
            display: block;
            margin-top: 1em;
         }
      </style>
   </head>
   <body>
      <h1>Screen Orientation API</h1>

      <span id="so-unsupported" class="api-support hidden">API not supported</span>
      <span id="soo-supported" class="api-support hidden">Old API version supported</span>

      <div id="so-results">
         <ul>
            <li>
               The orientation of the device is <span id="orientation" class="value">unavailable</span>.
            </li>
            <li class="new-api hidden">
               The angle of the device is <span id="angle" class="value">unavailable</span>.
            </li>
         </ul>

         <form>
            <label for="orientation-type">Lock the device in:</label>
            <select id="orientation-type">
               <option value="any">any</option>
               <option value="natural">natural</option>
               <option value="portrait">portrait</option>
               <option value="landscape">landscape</option>
               <option value="portrait-primary">portrait-primary</option>
               <option value="portrait-secondary">portrait-secondary</option>
               <option value="landscape-primary">landscape-primary</option>
               <option value="landscape-secondary">landscape-secondary</option>
            </select>
            <br />
            <input class="button-demo" id="lock-button" type="submit" value="Lock!" />
            <input class="button-demo" id="unlock-button" type="reset" value="Unlock!" />
         </form>
      </div>

      <small class="author">
         Demo created by <a href="http://www.audero.it">Aurelio De Rosa</a>
         (<a href="https://twitter.com/AurelioDeRosa">@AurelioDeRosa</a>).<br />
         This demo is part of the <a href="https://github.com/AurelioDeRosa/HTML5-API-demos">HTML5 API demos repository</a>.
      </small>

      <script>
         var prefix = 'orientation' in screen ? '' :
                      'mozOrientation' in screen ? 'moz' :
                      'msOrientation' in screen ? 'ms' :
                      null;

         if (prefix === null) {
            document.getElementById('so-unsupported').classList.remove('hidden');

            ['lock-button', 'unlock-button'].forEach(function(elementId) {
               document.getElementById(elementId).setAttribute('disabled', 'disabled');
            });
         } else {
            var select = document.getElementById('orientation-type');
            var orientationElem = document.getElementById('orientation');
            var onChangeHandler;

            var Fullscreen = {
               launch: function(element) {
                  if(element.requestFullscreen) {
                     element.requestFullscreen();
                  } else if(element.mozRequestFullScreen) {
                     element.mozRequestFullScreen();
                  } else if(element.webkitRequestFullscreen) {
                     element.webkitRequestFullscreen();
                  } else if(element.msRequestFullscreen) {
                     element.msRequestFullscreen();
                  }
               },
               exit: function() {
                  if(document.exitFullscreen) {
                     document.exitFullscreen();
                  } else if(document.mozCancelFullScreen) {
                     document.mozCancelFullScreen();
                  } else if(document.webkitExitFullscreen) {
                     document.webkitExitFullscreen();
                  } else if (document.msExitFullscreen) {
                     document.msExitFullscreen();
                  }
               }
            };

            // Determine what version of the API is implemented
            if ('orientation' in screen && 'angle' in screen.orientation) {
               // The browser supports the new version of the API

               // Show the properties supported by the new version
               var newProperties = document.getElementsByClassName('new-api');
               for(var i = 0; i < newProperties.length; i++) {
                  newProperties[i].classList.remove('hidden');
               }

               document.getElementById('lock-button').addEventListener('click', function (event) {
                  event.preventDefault();
                  Fullscreen.launch(document.documentElement);
                  screen.orientation.lock(select.value);
               });

               document.getElementById('unlock-button').addEventListener('click', function (event) {
                  event.preventDefault();
                  Fullscreen.exit();
                  screen.orientation.unlock();
               });

               var angleElem = document.getElementById('angle');
               onChangeHandler = function() {
                  orientationElem.textContent = screen.orientation.type;
                  angleElem.textContent = screen.orientation.angle;
               };
               screen.orientation.addEventListener('change', onChangeHandler);
               onChangeHandler();
            } else {
               // The browser supports the old version of the API, so the user is informed of that
               document.getElementById('soo-supported').classList.remove('hidden');

               // Remove the options that aren't available in the old version of the API
               var unavailableOptions = [
                  document.querySelector('#orientation-type option[value="any"]'),
                  document.querySelector('#orientation-type option[value="natural"]')
               ];
               for(var i = 0; i < unavailableOptions.length; i++) {
                  unavailableOptions[i].parentElement.removeChild(unavailableOptions[i]);
               }

               document.getElementById('lock-button').addEventListener('click', function (event) {
                  event.preventDefault();
                  Fullscreen.launch(document.documentElement);

                  setTimeout(function () {
                     screen[prefix + (prefix === '' ? 'l' : 'L') + 'ockOrientation'](select.value);
                  }, 1);
               });
               document.getElementById('unlock-button').addEventListener('click', function (event) {
                  event.preventDefault();
                  screen[prefix + (prefix === '' ? 'u' : 'U') + 'nlockOrientation']();
                  Fullscreen.exit();
               });

               onChangeHandler = function() {
                  var orientationProperty = prefix + (prefix === '' ? 'o' : 'O') + 'rientation';
                  orientationElem.textContent = screen[orientationProperty];
               };
               screen.addEventListener(prefix + 'orientationchange', onChangeHandler);
               onChangeHandler();
            }
         }
      </script>
   </body>
</html>

结论

在本文中,我描述了Screen Orientation API规范的新版本。 使用此API,您可以检测用户设备的方向(纵向和横向)并将其锁定为应用程序所需的模式。 正如我们所看到的,最近对支持的支持有所增加,因此您可以在更多浏览器中使用它,尽管您必须注意所支持的API版本。 请记住,Chrome和Opera支持新版本,而Firefox和Internet Explorer支持旧版本。

From: https://www.sitepoint.com/screen-orientation-api-reloaded/

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值