如何在瀏覽器中的 web 應用程序中強制橫向

Question

我有一個在 Android 上的 chrome 網絡瀏覽器中運行的網絡應用程序。
我想將方向鎖定為橫向。

我根據本教程嘗試了幾個選項：
使用 ScreenOrientation.lock()，這是實驗性的。 這里的示例代碼在我的手機（Pixel3，Android 11）中不起作用 - 當設備旋轉時，方向會發生變化。

我還嘗試了一個 CSS 技巧，如果檢測到設備處於縱向模式，它會將屏幕旋轉 90 度。
在簡化示例中，屏幕以橫向模式呈現，但實際應用程序的功能已損壞。 例如，當手指在 x 方向移動時被解釋為在 y 方向移動。

我的 Pixel3 手機在 Android 中的 Chrome 上的其他嘗試也失敗了（旋轉設備時方向會發生變化）

我可以通過將頁面安裝為 PWA“添加到主屏幕”並使用清單來鎖定方向

cat manifest.json
  "display": "standalone",
  "orientation": "landscape",

但這需要用戶將應用安裝為PWA

我想在常規瀏覽器中運行時鎖定 webapp 的方向。
這可能嗎？

謝謝

Answer 1

您可以做的最好的選擇是生成一個不允許輸入的簡單popup ，即； 覆蓋屏幕。 然后使用下面的代碼【可以更好的微調】來檢測用戶是豎屏還是橫屏。

setTimeout(() => {
  if(window.innerHeight > window.innerWidth){
    document.body.getElementById('custom-popup').classList.add('show');
    // Obviously you'd have to make a popup that is visible when the class 'custom-popup` is added.
  } else {
    document.body.getElementById('custom-popup').classList.remove('show');
    // The user switched to landscape presumably
  }
}, 3000);