장치 방향에 대한 CSS 미디어 쿼리의 소프트 키보드 간섭 문제를 어떻게 극복할 수 있습니까?-CSS 튜토리얼-php.cn

장치 방향에 대한 CSS 미디어 쿼리의 소프트 키보드 간섭 문제를 어떻게 극복할 수 있습니까?

Linda Hamilton

풀어 주다： 2024-10-26 08:37:30

원래의

996명이 탐색했습니다.

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

로그인 후 복사

기타 옵션

원래 질문에서 언급된 또 다른 옵션은

<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; }</p></code>

로그인 후 복사

이 접근 방식을 사용하려면 JavaScript를 사용하여 방향을 기반으로 하는 요소입니다. 특히 표준이 아닌 화면 크기를 가진 장치에서는 @media 쿼리 접근 방식만큼 안정적이지 않을 수 있습니다.

최근 발전

최근에는 최신 미디어 쿼리 기능이 있습니다. 소프트 키보드 문제 없이 방향 감지에 대한 더 나은 지원을 제공하는 기능이 도입되었습니다. 여기에는 다음이 포함됩니다: