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

前端之家收集整理的这篇文章主要介绍了css – 防止固定元素在触摸屏上放大时调整大小前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
在HTML网站上,您有一个固定的元素,如下所示:
<div id="fixed">
  <p>Some content</p>
</div>

它有这个CSS:

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

当您在移动设备(或任何启用触摸屏的设备)上查看此页面时,您会捏住屏幕进行放大,固定元素会随着所有其他内容(它变大)放大。当你放大足够远,它变得如此之大,它几乎完全重叠下面的所有内容

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

如何防止单个元素在浏览器中调整大小,并使它保持相同的大小在任何时候?

解决方法

Demo to this answer
Dialog widget library I wrote based on this answer
Demo for the dialog widget在手机上试用,缩放并点击链接

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

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

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

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

这会将元素重新缩放为相对于当前视口缩放的缩放1比例,但它可能仍然不正确地放置在页面上。这意味着我们必须为它的位置获得新的值。屏幕上会发生什么取决于元素的CSS位置值,固定的行为将不同于绝对和移动Safari上的固定位置有一个额外的平滑效果,而页面被放大,这会造成一些不便的问题,为此原因 – 我建议有一个100%的content height元素作为你想要的缩放元素的相对父项,然后在你的脚本中,将你的元素绝对地放置在父代。以下值适用于此示例演示:

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

您还可以注意使用transform-origin CSS属性,这取决于您希望缩放从哪个锚点生效 – 这对对齐有直接影响。

原文链接:https://www.f2er.com/css/220772.html

猜你在找的CSS相关文章