터치스크린 확대/축소 중에 고정 요소 크기 조정을 방지하는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

터치스크린 확대/축소 중에 고정 요소 크기 조정을 방지하는 방법은 무엇입니까?

DDD

풀어 주다： 2024-10-30 16:53:02

원래의

328명이 탐색했습니다.

How to Prevent Fixed Element Resizing During Touchscreen Zooming?

터치스크린 장치에서 확대/축소할 때 고정 요소의 크기 조정 문제를 해결하는 방법

웹 개발에서는 사용자의 상호 작용에 관계없이 요소. 그러나 터치스크린에서 고정된 요소로 작업할 때 확대/축소하면 예기치 않은 크기 조정 문제가 발생할 수 있습니다.

다음 코드 조각을 고려하세요.

<code class="html"><div id="fixed">
  <p>Some content</p>
</div></code>

로그인 후 복사

<code class="css">#fixed {
  height: 150px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
}</code>

로그인 후 복사

터치스크린에서 사용자가 확대하기 위해 손가락을 모으는 경우 , 고정 요소는 나머지 콘텐츠와 함께 확장됩니다. 그러나 지나치게 확대/축소하면 요소의 크기가 너무 커져 다른 콘텐츠와 겹칠 수 있습니다. 이 문제를 해결하려면 확대/축소 이벤트 중에 고정 요소의 크기가 조정되지 않도록 해야 합니다.

해결책은 사용자의 확대/축소 수준에 따라 요소의 크기와 위치를 다시 계산하는 것입니다. 스크롤 이벤트 중에 요소의 CSS 변환과 위치를 지속적으로 업데이트하면 이를 달성할 수 있습니다.

<code class="javascript">window.addEventListener('scroll', function(e) {
  // Calculate the zoom factor.
  var zoom = window.innerWidth / document.documentElement.clientWidth;

  // Apply the zoom factor as a CSS3 transform.
  el.style["transform"] = "scale(" + zoom + ")";
});</code>

로그인 후 복사

<code class="javascript">// Reset the element's position.
el.style.left = window.pageXOffset + 'px';
el.style.bottom = document.documentElement.clientHeight - (window.pageYOffset + window.innerHeight) + 'px';</code>

로그인 후 복사

이 접근 방식은 확대/축소에 관계없이 요소의 크기를 다시 원래 크기로 효과적으로 조정하고 그에 따라 위치를 조정합니다. 수준입니다.

위 내용은 터치스크린 확대/축소 중에 고정 요소 크기 조정을 방지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!