터치스크린 줌에서 고정 요소 크기를 어떻게 유지할 수 있습니까?

터치스크린 확대/축소에서 요소 크기 유지

고정 요소가 터치스크린 장치에 표시되는 경우 확대하거나 축소하면 크기가 조정될 수 있습니다. 바람직하지 않은 행동을 만드는 것입니다. 이로 인해 사이트 탐색이 중단되거나 콘텐츠가 겹칠 수 있습니다.

이러한 동작을 방지하는 한 가지 방법은 CSS3 변환을 사용하여 요소의 크기를 동적으로 조정하는 것입니다. 스크롤 이벤트를 모니터링하면 확대/축소 비율을 계산하고 요소에 적용하여 크기를 일정하게 유지할 수 있습니다.

예를 들어 다음 코드 조각은 확대/축소 비율을 계산하고 이를 배율 변환으로 적용합니다.

el.style["transform"] = "scale(" + window.innerWidth/document.documentElement.clientWidth + ")";

그러나 이 조정만으로는 충분하지 않을 수 있습니다. 고정 요소는 확대된 페이지가 있는 모바일 Safari에서 다르게 동작하는 경향이 있습니다. 이를 보완하기 위해 크기가 조정된 요소를 높이가 100%인 상위 요소 내에 절대적으로 배치하고 그 위치를 동적으로 조정할 수 있습니다.

overlay.style.left = window.pageXOffset + 'px';
overlay.style.bottom = document.documentElement.clientHeight - (window.pageYOffset + window.innerHeight) + 'px';

이러한 기술을 사용하면 터치스크린 기기에서 확대/축소할 때 고정 요소의 크기가 조정되는 것을 효과적으로 방지할 수 있습니다. , 의도한 크기와 가시성을 유지합니다.

위 내용은 터치스크린 줌에서 고정 요소 크기를 어떻게 유지할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!