如何克服软键盘干扰 CSS 媒体查询以实现设备方向的问题？-css教程-PHP中文网

首页

web前端

css教程

如何克服软键盘干扰 CSS 媒体查询以实现设备方向的问题？

Linda Hamilton

Oct 26, 2024 am 08:37 AM

How can you overcome the issue of soft-keyboard interference with CSS media queries for device orientation?

CSS 媒体查询和设备方向：克服软键盘问题

简介

CSS 中的媒体查询提供了一种强大的机制，可以根据设备功能（例如方向）应用样式。但是，在某些设备上，软键盘可能会干扰这些方向规则，导致网页渲染不正确。本文探讨了解决此问题的替代解决方案。

方向媒体查询

媒体查询可用于使用以下语法来定位纵向和横向方向：

<code class="css">@media all and (orientation:portrait) { /* Portrait styles */ }

@media all and (orientation:landscape) { /* Landscape styles */ }</code>

登录后复制

虽然此方法适用于大多数设备，但在纵向模式下打开软键盘时会失败。减少的可见区域迫使页面以横向方式呈现，从而破坏了布局。

替代解决方案

一种替代方案是使用 JavaScript 来检测软键盘并动态应用基于方向的样式。这可以使用 window.innerHeight 属性来实现，该属性返回浏览器窗口的高度。当软键盘打开时，窗口高度会降低，从而触发 JavaScript 函数：

<code class="js">window.addEventListener('resize', function() {
  if (window.innerHeight < screen.height) {
    // Soft-keyboard is open
    document.documentElement.classList.add('soft-keyboard-open');
  } else {
    // Soft-keyboard is closed
    document.documentElement.classList.remove('soft-keyboard-open');
  }
});

登录后复制

一旦检测到软键盘，就可以将 CSS 类应用到中。使用自定义样式定位纵向或横向方向的元素：

<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 */ }

登录后复制

其他选项

原始问题中提到的另一个选项是将类添加到 ;基于方向的元素并使用 CSS 定位它们：

<code class="html"><html class="landscape">
  ...
</html>

.landscape .landscape-only { display:block; }
.landspace .portrait-only  { display:none; }
.portrait .portrait-only   { display:block; }
.portrait .landscape-only  { display:none; }</code>

登录后复制

此方法需要使用 JavaScript 来设置的 class 属性。基于方向的元素。它可能不如 @media 查询方法可靠，尤其是在非标准屏幕尺寸的设备上。

最新进展

最近，更新的媒体查询功能已经推出，可以为方向检测提供更好的支持，而不会出现软键盘问题。其中包括：