如何在觸控螢幕縮放上保持固定的元素大小？

在觸控螢幕縮放上保持元素大小

當固定元素顯示在觸控螢幕裝置上時，放大或縮小可能會導致它們調整大小，造成不良行為。這可能會破壞網站導航或導致內容重疊。

防止此行為的一種方法是使用 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中文網其他相關文章！