首頁 > 文章 > web前端 > 如何克服軟鍵盤幹擾 CSS 媒體查詢以實現裝置方向的問題？

如何克服軟鍵盤幹擾 CSS 媒體查詢以實現裝置方向的問題？

Linda Hamilton原創: 2024-10-26 08:37:30873瀏覽

How can you overcome the issue of soft-keyboard interference with CSS media queries for device orientation?

CSS 媒體查詢與裝置方向：克服軟鍵盤問題

CSS

CSS

CSS的媒體查詢提供了一種強大的機制，可以根據裝置功能（例如方向）套用樣式。但是，在某些裝置上，軟鍵盤可能會幹擾這些方向規則，導致網頁渲染不正確。本文探討了解決此問題的替代解決方案。

方向媒體查詢

<code class="css">@media all and (orientation:portrait) { /* Portrait styles */ }

@media all and (orientation:landscape) { /* Landscape styles */ }</code>

媒體查詢可用來使用以下語法來定位縱向和橫向方向：

雖然此方法適用於大多數設備，但在縱向模式下開啟軟鍵盤時會失敗。減少的可見區域迫使頁面以橫向方式呈現，從而破壞了佈局。

替代解決方案

<code class="js">window.addEventListener('resize', function() {
  if (window.innerHeight < screen.height) {
    // Soft-keyboard is open
    document.documentElement.classList.add('soft-keyboard-open');
  } else {
    // Soft-keyboard is closed
    document.documentElement.classList.remove('soft-keyboard-open');
  }
});

一種替代方案是使用 JavaScript 來偵測軟鍵盤並動態應用基於方向的樣式。這可以使用 window.innerHeight 屬性來實現，該屬性會傳回瀏覽器視窗的高度。當軟鍵盤開啟時，視窗高度會降低，觸發 JavaScript 函數：

<code class="css">.soft-keyboard-open.portrait { /* Portrait styles with soft-keyboard open */ }

.soft-keyboard-open.landscape { /* Landscape styles with soft-keyboard open */ }

.portrait { /* Standard portrait styles */ }

.landscape { /* Standard landscape styles */ }

一旦偵測到軟鍵盤，就可以將 CSS 類別套用到中。使用自訂樣式定位縱向或橫向方向的元素：

其他選項

<code class="html"><html class="landscape">
  ...
</html>

.landscape .landscape-only { display:block; }
.landspace .portrait-only  { display:none; }
.portrait .portrait-only   { display:block; }
.portrait .landscape-only  { display:none; }</code>

原始問題中提到的另一個選項是將類別新增至 ;基於方向的元素並使用CSS 定位它們：

此方法需要使用JavaScript 來設定的class 屬性。基於方向的元素。它可能不如 @media 查詢方法可靠，尤其是在非標準螢幕尺寸的裝置上。

如何克服軟鍵盤幹擾 CSS 媒體查詢以實現裝置方向的問題？

相關文章