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

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 <p></p>一種替代方案是使用 JavaScript 來偵測軟鍵盤並動態應用基於方向的樣式。這可以使用 window.innerHeight 屬性來實現，該屬性會傳回瀏覽器視窗的高度。當軟鍵盤開啟時，視窗高度會降低，觸發 JavaScript 函數：<pre class="brush:php;toolbar:false"><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 */ }</code>

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

其他選項

<code class="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 媒體查詢方向的問題是一個常見的挑戰。透過實施上述替代解決方案，開發人員可以確保在具有軟鍵盤的裝置上一致地呈現網頁，從而提供更好的使用者體驗。

以上是如何克服軟鍵盤幹擾 CSS 媒體查詢以實現裝置方向的問題？的詳細內容。更多資訊請關注PHP中文網其他相關文章！