如何在 Web 應用程式中強制橫向方向？

解鎖為您的應用程式強制橫向定向的秘密

某些應用程式需要特定的定向模式，這已不是什麼秘密。如果您的應用程式絕對不是為縱向模式設計的，那麼您可能會碰壁。強制橫向模式的功能長期以來一直是缺少的功能，但不用擔心！

原始解決方案：有限檢測且無法控制

傳統上，您只能檢測使用CSS3 媒體查詢或JavaScript 事件來觸發適當的CSS 樣式的當前方向。雖然這允許您對方向變化做出反應，但設備的自然行為仍然占主導地位，這意味著您無法強制執行特定方向。

HTML5 Web 應用程式清單來救援

最後，HTML5 webapp 清單提供了一個解決方案。新增manifest.json 檔案後，現在可以設定以下屬性：

• 顯示：控制 UI 模式（獨立、全螢幕、最小 ui 或瀏覽器）
• orientation：強制橫向或縱向模式（橫向或縱向）

透過將這些行包含在您的manifest.json中並將其連結到您的HTML檔案中，您最終可以強制應用程式的橫向方向。

實作細節：

{
    "display": "fullscreen", /* Choose UI mode here */
    "orientation": "landscape"
}

<link rel="manifest" href="manifest.json">

支援的瀏覽器：

目前，Chrome 提供對web清單的支援方向鎖定功能。隨著我們收集更多信息，我們將相應更新本文。

以上是如何在 Web 應用程式中強制橫向方向？的詳細內容。更多資訊請關注PHP中文網其他相關文章！