如何克服平板电脑上的 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 媒体查询方向困境：宽高比来拯救？