소프트 키보드가 방향 스타일을 방해합니다. 어떻게 해결할 수 있나요?-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

소프트 키보드가 방향 스타일을 방해합니다. 어떻게 해결할 수 있나요?

Mary-Kate Olsen

Oct 26, 2024 pm 05:20 PM

Soft Keyboard Disrupts Orientation Styles: How Can We Fix It?

CSS 미디어 쿼리: 소프트 키보드가 방향 규칙을 방해합니다 - 대체 솔루션

CSS 미디어 쿼리를 사용하여 방향 기반을 적용할 때 문제가 발생합니다. 태블릿 장치의 스타일. 사용자가 입력 필드를 탭하여 소프트 키보드가 나타날 때 문제가 발생합니다. 웹페이지의 가시 영역이 줄어들어 페이지가 세로 모드가 아닌 가로 모드 CSS로 표시됩니다.

(방향: 세로) 및 (방향: 가로) 미디어를 제거하는 것이 한 가지 잠재적인 해결책이 될 수 있습니다. 쿼리. 대신 가로 모드에는 (최소 종횡비: 13/9) 미디어 쿼리를 사용하고 세로 모드에는 (최대 종횡비: 13/9) 미디어 쿼리를 사용하세요. 이러한 쿼리는 기기 방향 대신 뷰포트의 가로세로 비율을 지정합니다.

<code class="css">@media screen and (min-aspect-ratio: 13/9) {
  /* Landscape styles here */
}

@media screen and (max-aspect-ratio: 13/9) {
  /* Portrait styles here */
}</code>

로그인 후 복사

또 다른 접근 방식은 현재 방향을 기반으로 html 요소에 클래스를 할당하고 CSS에서 해당 클래스를 타겟팅하는 것입니다.

<code class="html"><html class="landscape">
<body>
    <h1 class="landscape-only">Element Heading - Landscape</h1>
    <h1 class="portrait-only">Element Heading - Portrait</h1>
</body>
</html></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>

로그인 후 복사

이 솔루션에서는 방향 변경에 따라 클래스 추가 및 제거를 처리하려면 JavaScript가 필요합니다.

위 내용은 소프트 키보드가 방향 스타일을 방해합니다. 어떻게 해결할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.