如何克服平板電腦上的 CSS 媒體查詢方向困境：寬高比來拯救？
- Susan Sarandon原創
- 2024-10-26 07:33:02982瀏覽
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中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn