터치스크린 장치에서 확대/축소할 때 고정 요소의 크기 조정 문제를 해결하는 방법
웹 개발에서는 사용자의 상호 작용에 관계없이 요소. 그러나 터치스크린에서 고정된 요소로 작업할 때 확대/축소하면 예기치 않은 크기 조정 문제가 발생할 수 있습니다.
다음 코드 조각을 고려하세요.
<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 중국어 웹사이트의 기타 관련 기사를 참조하세요!