防止在放大触摸屏时固定元素调整大小 [英] Prevent that a fixed element resizes when zooming on touchscreen

问题描述

在HTML网站上，您有如下的固定元素：

On an HTML website, you have a fixed element like this:

<div id="fixed">
  <p>Some content</p>
</div>

它有这个CSS：

#fixed { height:150px; position:fixed; top:0; left:0; z-index:10000; }

在移动设备（或任何启用触摸屏的设备）上查看此页面时，捏住屏幕放大，固定元素与所有其他内容一起放大（它变大）。当你放大足够远，它变得如此之大，以致它几乎完全重叠下面的所有内容。

When you view this page on a mobile device (or any touchscreen-enabled device), and you pinch the screen to zoom in, the fixed element zooms in along with all the other content (it gets bigger). When you zoom in far enough, it becomes so big that it almost fully overlaps all the content beneath it.

一个实际的用例将是一个UI像一个固定的导航栏

A practical use case would be a UI like a fixed navigation bar across the top, or a floating button in the corner of the screen.

如何防止单个元素在浏览器中调整大小，并使其保持相同的大小

How could you prevent a single element from resizing in the browser, and make it stay the same size at all times?

推荐答案

演示此答案

我基于此答案写了对话框小部件库。 br>
演示对话框小部件 在移动设备上试用，放大和点按链接。

Demo to this answer
Dialog widget library I wrote based on this answer.
Demo for the dialog widget Try it on mobile, zoom around and tap the link.

虽然手势事件似乎保存了一些有关某事的缩放因子的元数据，但我们可能会更好在控制和手动找到它。由于我们想在用户移动时保持效果，我们需要在每个滚动事件期间重新计算。

While the gesture event seems to hold some metadata about the scale factor of something, we might be better off in control and find it manually. Since we want to keep the effect up while the user moves around live, we need to recalculate during every scroll event.

window.addEventListener('scroll', function(e){ /* coming next */ })

缩放因子并将其作为CSS3变换应用于重新缩放的元素：

We calculate the zoom factor and apply it to the rescaled element as a CSS3 transform:

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

这会将元素重新缩放为相对于当前视口缩放的缩放1比例，但很可能仍然不正确地放置在页面上。这意味着我们必须为它的位置获得新的值。屏幕上会发生什么取决于元素的CSS位置值， fixed 的行为将不同于 absolute 和在移动Safari特别地， fixed position在页面缩放时有一个额外的平滑效果，这会导致一些不方便的问题 - 我建议有一个100％content height元素a relative parent，然后在脚本中，将元素 absolute 放在父代中。以下值适用于此示例演示：

This will rescale the element back to zoom 1 ratio relative to the current viewport zoom, but it's likely it is still incorrectly placed on the page. This means we have to get new values for it's position. What will actually happen on screen is dependant on the element's CSS position value, fixed will behave differently than absolute and on mobile Safari specifically, fixed position has an added smoothed out effect while the page is zoomed, which creates some inconvenient problems for this cause - I would suggest having a 100% content height element as a relative parent for your intended scaled element, then in your script, position your element absolutely inside of the parent. The following values work for this example demo:

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

您还可以注意使用 transform-origin CSS属性，具体取决于您希望缩放的锚点生效 - 这对对齐有直接影响。

You might also pay attention to using transform-origin CSS property depending on from which anchor point you want the scaling to take effect - this has a direct effect on alignment.

这篇关于防止在放大触摸屏时固定元素调整大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！