什么是 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 支持得很好，可以考慮在你的下一個項目中使用。

文章來源： https://juejin.im/post/5c77453b51882564965edf8b 更多： 蘋果手機微信瀏覽器select標簽選擇完成之后頁面不會自動回到原位 HTML5 Selection對象 JS Range使用整理

轉載于:https://www.cnblogs.com/tianma3798/p/11492002.html

總結

以上是生活随笔為你收集整理的屏幕方向读取与锁定：Screen Orientation API(转)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。