CSS 媒體查詢方向困境：尋找解決方案
使用多個平板設備時，依靠CSS 媒體查詢來應用設備方向-基於樣式可能會帶來挑戰。當文字輸入期間出現軟鍵盤時，就會出現問題，這會縮小可見的網頁並觸發基於橫向的 CSS 應用程序，儘管設備處於縱向模式。
常見的解決方案是將類別新增至HTML 元素並根據裝置方向定位特定類別：
<code class="html"><html class="landscape">
<body>
<h1 class="landscape-only">Element Heading - Landscape</h1>
<h1 class="portrait-only">Element Heading - Portrait</h1></code><code class="css">.landscape .landscape-only { display:block; }
.landspace .portrait-only { display:none; }
.portrait .portrait-only { display:block; }
.portrait .landscape-only { display:none; }</code>但是，更通用的方法在於利用針對寬高比的媒體查詢。對於橫向模式：
<code class="css">@media screen and (min-aspect-ratio: 13/9) { /* landscape styles here */}</code>對於縱向模式：
<code class="css">@media screen and (max-aspect-ratio: 13/9) { /* portrait styles here */}</code>無論是否存在軟鍵盤，此方法都可確保一致的體驗。與基於方向的媒體查詢不同，它的功效可歸因於它不受鍵盤高度影響。
以上是如何克服平板電腦上的 CSS 媒體查詢方向困境：寬高比來拯救？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
