在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在手机上试用,缩放并点击链接。
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属性,这取决于您希望缩放从哪个锚点生效 – 这对对齐有直接影响。