如何克服平板電腦上的 CSS 媒體查詢方向困境：寬高比來拯救？-css教學-PHP中文網

如何克服平板電腦上的 CSS 媒體查詢方向困境：寬高比來拯救？

Susan Sarandon

發布： 2024-10-26 07:33:02

原創

997 人瀏覽過

How to Overcome the CSS Media Query Orientation Dilemma on Tablets: Aspect Ratios to the Rescue?

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中文網其他相關文章！

php8，我來也

30分鐘學會網站佈局

尚觀Oracle入門到精通視頻教程

你的第一行UNI-APP程式碼

Flutter 從頭到應用程式啟動

兄弟連新版Linux視頻教程

AXURE 9影片教學（適用於產品經理互動產品設計UI）

零基礎PS影片教學

16天帶你入門UI視頻教程

PS技巧和切片技巧影片教學

阿裡雲環境搭建以及項目上線視頻教程

電腦網路概述－程式設計師必須掌握的基礎知識

程式設計師必備教學——HTTP協定講解

Websocket影片教學

如何克服平板電腦上的 CSS 媒體查詢方向困境：寬高比來拯救？