屏幕定位API使用JavaScript來旋轉屏幕

媒體查詢允許的網站，這取決于智能手機或平板電腦的屏幕方向調整布局。但有時你可能想讓你的網站鎖定到一個特定的方向，縱向或橫向。本地應用程序的格式可以在這種情況下，指定。該應用程序將只顯示在預設的格式–獨立于實際的定位裝置。通過使用HTML5的屏幕定位API，你可以在JavaScript中定義屏幕方向。

定義一個文檔的屏幕方向

屏幕方向可以通過screen.orientation財產和lock()方法調整。該方法的默認值是“任何”。這使得該設備適用于任何方向取決于設備的物理定位。值“自然”的網站顯示在設備的自然取向，隨設備的不同而不同。智能手機通常使用肖像模式，而片喜歡景觀模式。

屏幕取向。鎖具（“自然”）；
在上面的例子中，這套裝置的自然取向。

當然，屏幕方向API還允許你定義一個個人取向。你可以選擇之間的四個值，其中包括移動設備，所有可能的方向。這些是：“肖像，肖像”的主要“中等”，“景觀主”，和“中學景觀”。

屏幕取向。鎖具（“像主”）；
同樣，“中學景觀”和“景觀主要在180°旋轉。

你也可以不用“主要”和“次要的”，并用“肖像”或“景觀”為關鍵詞。這使得該裝置顯示取向模式。

如果你想刪除定義的取向，叫unlock()方法。

屏幕取向。解鎖（）；
Advertisement

只為全屏幕模式

有通過screen.orientation定義定位要求。首先，通過lock()鎖只能如果瀏覽器已經切換到全屏模式下通過requestfullscreen()。第二個要求是緊密相連的：第一種為全屏幕模式需要用戶請求而不是自動啟動，這適用于屏幕定位API，太。

因此，你應該綁定的方法點擊事件的調用。

文件使用方（“按鈕”）。注冊偵聽器（“點擊”， 功能（） {文件文檔元素]。requestfullscreen（）；屏幕取向。鎖具（“像主”）；
 
 }， 假）；
在應用lock()方法啟動全屏模式是很重要的，如上面的例子。結束的全屏幕模式將釋放鎖定位。

如果你在瀏覽器中，打開一個新文檔為例，調用一個鏈接時，定義的取向隨著全屏模式將終結。屏幕定位API只在當前HTML文檔。

閱讀取向

你不會總是想預定義取向。有時你只想知道一個智能手機或平板電腦的定位。在這種情況下，你可以讓屏幕定位API讀取方向。類型的屬性顯示一個定位關鍵詞。

警報（屏幕取向。類型）；
但你也可以用角度屬性顯示的方位角。

警報（屏幕取向。角）；
0°角對應的自然傾向，這主要是“肖像主”智能手機。90°對應”景觀小學”，180°“肖像中學”，和“270°中學景觀”。這取決于設備的角度，可以代表不同的關鍵詞。

為了查詢定位，瀏覽器需要運行在全屏模式。

應對改變屏幕方向改變的事件也有可能通過。只需添加addeventlistener()和功能定位性能。

屏幕取向。注冊偵聽器（“改變”， 功能（E） {警報（屏幕取向。類型 + “” +屏幕取向。角）；
}， 假）；
定位的每個變化觸發警報，這顯示目前定位為關鍵詞和角度。

瀏覽器支持

屏幕定位API支持Chrome和Opera 25 + 38 +供應商無前綴。當然，在移動設備上的API只能。你可以使用if語句來找出如果瀏覽器支持的API。

如果 （“定位” 進入屏幕） {…}
然后，您可以顯示瀏覽器不支持將設備變成一個特定的方向 API的通知手動  。此外，桌面瀏覽器不支持的API不顯示錯誤消息，如果是在這個查詢API調用。

屏幕方向是相對較新的API。該API使用一些不同的方法名稱的早期發展階段。例如：lockorientation()代替lock()和unlockorientation()代替unlock()。你不應該使用舊名稱為Chrome和Opera。

這些都是在Internet Explorer 11和Firefox 33 +支持；然而，他們需要適當的前綴–MS Internet Explorer，Firefox MOZ。

屏幕mslockorientation。鎖具（“像主”）；屏幕mozlockorientation。鎖具（“像主”）；
檢測一個方向變化的事件的名稱也不同于目前的API名稱。而不是用“改變”，你需要使用“適當的前綴orientationchange”。

如果你想覆蓋所有的瀏覽器，你沒有選擇，但同時使用，舊的和新的名字，并關注供應商前綴舊名稱。

最后一件事你應該記住當使用屏幕定位API：它只能在全屏API，你不應該使用它的網站或類似的設計。它為瀏覽器游戲或其他需要全屏模式的應用更好。

• 牧羊人相關推薦：
• 網站設計文字編排的易讀性
• HTML5網頁設計創意欣賞
• 小日本優秀網頁設計創意欣賞
• 推薦網頁設計3本新書
• 網頁設計圖標免費下載