CSS 防止固定元素在触摸屏上缩放时调整大小

Prevent that a fixed element resizes when zooming on touchscreen

提问by bobsoap

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

在 HTML 网站上，您有一个固定元素，如下所示：

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

It has this CSS:

它有这个 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.

当您在移动设备（或任何支持触摸屏的设备）上查看此页面并捏合屏幕进行放大时，固定元素会与所有其他内容一起放大（它会变大）。当您放大到足够远时，它会变得如此之大，以至于它几乎完全重叠了它下面的所有内容。

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.

一个实际的用例是 UI，比如顶部的固定导航栏，或屏幕角落的浮动按钮。

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

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

回答by mystrdat

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

Demo to this answer
我根据这个答案编写的对话框小部件库。
对话框小部件的演示在移动设备上试用，放大并点击链接。

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 */ })

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

我们计算缩放系数并将其作为 CSS3 变换应用于重新缩放的元素：

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

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, fixedwill behave differently than absoluteand on mobile Safari specifically, fixedposition 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 relativeparent 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:

这会将元素重新缩放回相对于当前视口缩放比例的缩放 1，但它可能仍然错误地放置在页面上。这意味着我们必须为其位置获取新值。屏幕上实际发生的情况取决于元素的 CSS 位置值，其fixed行为将absolute与移动 Safari 上的 Safari不同，尤其fixed是在页面缩放时，位置具有添加的平滑效果，这会为此造成一些不便的问题 - 我建议将 100% 内容高度元素作为relative预期缩放元素的父元素，然后在脚本中，将元素absolute放置在父元素内。以下值适用于此示例演示：

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

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

您可能还会注意使用transform-originCSS 属性，具体取决于您希望缩放从哪个锚点生效 - 这对对齐有直接影响。

回答by Max Knox

I'm looking to do the same thing that @bobsoap was trying to do BUT My solution is the following:

我正在做与@bobsoap 尝试做的事情相同的事情，但我的解决方案如下：

1. Disable zooming in your viewport tag:

1. 禁用视口标签的缩放：

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1" />

2. Use a plugin like: TouchSwipe.js:

2. 使用插件如：TouchSwipe.js：

https://github.com/mattbryson/TouchSwipe-Jquery-Plugin

https://github.com/mattbryson/TouchSwipe-Jquery-Plugin

And only zoom in the Div or divs that you want & suit to your needs.

并且只放大您想要并适合您需要的 Div 或 div。

I have 2 divs on a page (left & right) The left div has a fixed scrolling menu and the right has small text & images. I want to pinch/zoom and have only the right div zoom so that the user can read the text better if necessary. Rather than make the entire viewport zoomable and disable zoom on my left div, I'm doing exactly the opposite: Make only my right div zoomable via TouchSwipe plugin.

我在一个页面上有 2 个 div（左和右）左边的 div 有一个固定的滚动菜单，右边有小文本和图像。我想捏/缩放并且只有正确的 div 缩放，以便用户可以在必要时更好地阅读文本。我没有使整个视口可缩放并在我的左侧 div 上禁用缩放，而是完全相反：通过 TouchSwipe 插件仅使我的右侧 div 可缩放。

I'll share my code when I'm done if anyone is interested in how I implemented the TouchSwipe plugin.

如果有人对我如何实现 TouchSwipe 插件感兴趣，我会在完成后分享我的代码。

回答by Tammy Shipps

You're missing a width attribute and you can use things like max-width and max-height to help keep the box the size you wanted. However, zooming allows the user to get pretty granular with a page, so there's always going to be a chance they have that issue.

您缺少宽度属性，您可以使用诸如 max-width 和 max-height 之类的东西来帮助保持框为您想要的大小。但是，缩放允许用户对页面进行非常精细的处理，因此他们总是有可能遇到该问题。

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