屏幕方向讀取與鎖定：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 支持得很好，能夠考慮在你的下一個項目中使用。

簡單的演示能夠訪問 codepen.io/NimitzDEV/p…

參考連接

www.w3.org/TR/2019/WD-…