如何在行動網站上強制橫向方向並停用自動旋轉？

在行動網站上強制橫向方向

在現代以行動為中心的Web 開發時代，優化所有裝置的使用者體驗至關重要和方向。本問題探討了在行動網站上停用自動旋轉和強制橫向方向的方法。

CSS 解決方案

一種方法是利用媒體查詢來測試設備的方向。在縱向樣式表中，您可以隱藏所有內容並顯示一則訊息，指示應用程式僅在橫向模式下執行。例如：

<code class="css">@media screen and (orientation: portrait) {
  body {
    display: none;
  }

  .orientation-message {
    display: block;
    text-align: center;
    font-size: 2rem;
    margin-top: 100px;
  }
}</code>

jQuery 解決方案

或者，您可以使用 jQuery 檢查裝置的方向並相應地動態調整頁面佈局。以下是一個範例腳本：

<code class="javascript">$(function() {
  var orientation = window.orientation;

  if (orientation == 0 || orientation == 180) {
    // Landscape mode
    $('body').css('transform', 'rotate(0)');
  } else {
    // Portrait mode
    $('body').css('transform', 'rotate(-90deg)');
  }
});</code>

此腳本檢查 window.orientation 屬性，該屬性指示裝置的目前方向。根據值（橫向為 0 或 180，縱向為 90 或 -90），它使用 CSS 轉換來旋轉頁面內容。

您選擇的具體解決方案取決於您的偏好和目標設備的功能。 CSS 和 jQuery 方法都提供了有效的方法來強制橫向方向並停用行動網站上的自動旋轉。

以上是如何在行動網站上強制橫向方向並停用自動旋轉？的詳細內容。更多資訊請關注PHP中文網其他相關文章！