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

Question

在HTML网站上,您有一个固定的元素,如下所示:

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

它有这个CSS:

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

当您在移动设备(或任何支持触摸屏的设备)上查看此页面,并且您捏合屏幕以放大时,固定元素将与所有其他内容一起放大(它会变大).放大到足够远时,它变得如此之大,以至于它几乎完全覆盖了它下面的所有内容.

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

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

Answer 1

演示这个答案
我基于这个答案写的对话框小部件库.
对话框小部件的演示在移动设备上试用,缩放并点按链接.

虽然手势事件似乎包含一些关于某事物比例因子的元数据,但我们可能会更好地控制并手动找到它.由于我们希望在用户移动时保持效果,我们需要在每个滚动事件期间重新计算.

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

我们计算缩放因子并将其作为CSS3变换应用于重新缩放的元素:

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

这会将元素重新缩放到相对于当前视口缩放的缩放1比例,但很可能它仍然错误地放置在页面上.这意味着我们必须为它的位置获得新的价值.屏幕上实际发生的事情取决于元素的CSS位置值,与移动Safari的fixed行为方式不同absolute,特别fixed是在页面缩放时位置有一个额外的平滑效果,这会给这个原因带来一些不方便的问题 - 我建议将100%内容高度元素作为relative预期缩放元素的父元素,然后在脚本中将元素absolute放在父元素内部.以下值适用于此示例演示:

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

您可能还要注意使用transform-originCSS属性,具体取决于您希望缩放生效的锚点 - 这会对齐对象.

Answer 2

我希望做同样的事情@bobsoap试图做但我的解决方案如下:

1.禁用缩放视口标记:

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

2.使用如下插件:TouchSwipe.js:

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

并且只放大你想要的Div或div,以满足你的需要.

我在页面上有两个div(左和右)左div有一个固定的滚动菜单,右边有小文本和图像.我想要捏合/缩放并且只有正确的div缩放,以便用户可以在必要时更好地阅读文本.而不是让整个视口可缩放并禁用我的左侧div上的缩放,我做的恰恰相反:只通过TouchSwipe插件使我的右侧div可缩放.

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

Answer 3

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

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