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

터치스크린 확대/축소 중 고정된 요소 크기 유지

터치스크린이 장착된 모바일 기기는 웹페이지의 고정된 요소에 대해 고유한 과제를 제기합니다. 사용자가 확대하기 위해 화면을 모으는 경우 고정 요소는 나머지 콘텐츠와 함께 크기가 조정되어 기본 요소가 가려질 수 있습니다.

이러한 동작을 방지하려면 현재 확대/축소 비율을 계산하는 기술을 사용하여 고정 요소에 적절한 CSS3 변환을 적용하여 항상 동일한 크기를 유지하도록 합니다.

<code class="javascript">window.addEventListener('scroll', function(e) {
    var zoom = window.innerWidth / document.documentElement.clientWidth;
    el.style["transform"] = "scale(" + zoom + ")";
});</code>

이 로직은 확대/축소 비율을 계산하고 이를 크기 변환으로 적용합니다. 그러나 고정 요소의 위치가 부정확해질 수 있으므로 절대 위치 지정을 사용하여 조정합니다.

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

100% 콘텐츠 높이 상위 요소 내에 고정 요소를 배치하고 뷰포트 크기를 기준으로 위치를 조정하여 유지되도록 합니다. 확대/축소 수준에 관계없이 원하는 위치에 표시됩니다.

고정 요소의 크기 조정 기준점을 제어해야 하는 경우 변환 원본 속성에 주의하세요. 이 기술을 활용하면 터치스크린 줌 이벤트 중에 크기를 유지하는 요소를 만들어 모바일 장치에서의 사용자 경험을 향상시킬 수 있습니다.

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