什么是 Screen Orientation API

Screen Orientation API 為 Web 應(yīng)用提供了讀取設(shè)備當(dāng)前屏幕方向、旋轉(zhuǎn)角度、鎖定旋轉(zhuǎn)方向、獲取方向改變事件的能力。使得特定應(yīng)用在屏幕方向方面增強(qiáng)用戶體驗(yàn)，如視頻和游戲。該標(biāo)準(zhǔn)目前處于工作組草案狀態(tài)，最近一個(gè)修改為 1 月 29 日。

?

瀏覽器支持情況

屬性結(jié)構(gòu)

Screen Orientation API 通過在 Screen 接口上擴(kuò)展屬性 orientation 為我們提供該 API 的所有功能：

partial interface Screen {[SameObject] readonly attribute ScreenOrientation orientation; }; 復(fù)制代碼

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; }; 復(fù)制代碼

接下來我們就來解釋如何使用與讀取這些方法和屬性。

讀取屏幕方向

讀取屏幕方向主要通過 type 和 angle 兩個(gè)屬性，前者返回旋轉(zhuǎn)方向的描述，后者返回旋轉(zhuǎn)的角度

angle

angle 屬性代表了以設(shè)備的自然位置開始，逆時(shí)針方向上所旋轉(zhuǎn)的角度。如將手機(jī)逆時(shí)針旋轉(zhuǎn)90度變?yōu)闄M屏，那么此時(shí) angle 則返回 90 。

type

type 屬性主要通過描述來表達(dá)屏幕的旋轉(zhuǎn)方向，type 的返回值總共有四個(gè)，對(duì)應(yīng)著四個(gè)不同的旋轉(zhuǎn)方向：

portrait-primary：豎屏狀態(tài)并且旋轉(zhuǎn)角度為 0 度，也就是設(shè)備的自然位置

portrait-secondary：豎屏狀并且即旋轉(zhuǎn)角度為 180 度，也就是倒著拿的位置

landscape-primary：橫屏狀態(tài)并且旋轉(zhuǎn)角度為 90 度

landscape-secondary：橫屏狀態(tài)并且旋轉(zhuǎn)角度為 180 度

鎖定屏幕方向

出于一些安全方面的考慮，鎖定方向時(shí)必須使頁面處于全屏狀態(tài)

鎖定

鎖定屏幕通過 lock 方法，調(diào)用 lock? 方法需要傳入鎖定的方向描述字符串，隨后該方法會(huì)返回一個(gè) Promise。

描述字符串功能

portrait-primary	豎屏主方向
portrait-secondary	豎屏次方向
landscape-primary	橫屏主方向
landscape-secondary	橫屏次方向
portrait	豎屏方向(primary + secondary)
landscape	橫屏方向(primary + secondary)
natural	設(shè)備的自然方向
any	鎖定四個(gè)方向，即鎖定當(dāng)前屏幕方向

Example:

async function lockPortrait() { // 首先進(jìn)入全屏模式 await document.documentElement.requestFullscreen(); // 鎖定豎屏方向 await screen.orientation .lock('portrait') .catch(e => alert(e.message)); } 復(fù)制代碼

解鎖

解鎖不需要額外參數(shù)，只需要調(diào)用 unlock 即可：

function unlock() {screen.orientation.unlock(); } 復(fù)制代碼

屏幕方向改變事件

通過為 onchange 賦值或通過 addEventListener 都可以添加事件監(jiān)聽：

function rotationChange() {console.log('rotation changed to:', screen.orientation.type); } screen.orientation.addEventListener('change', rotationChange); 復(fù)制代碼

小結(jié)

透過本文，其實(shí)要使用這個(gè) API 并不困難，并且在某些場(chǎng)景下，我們還能直接通過 lock 方法改變屏幕的旋轉(zhuǎn)方向，提升瀏覽體驗(yàn)。并且移動(dòng)端上的 Chrome 和 FIrefox 支持得很好，可以考慮在你的下一個(gè)項(xiàng)目中使用。

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

轉(zhuǎn)載于:https://www.cnblogs.com/tianma3798/p/11492002.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。