在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属性，这取决于您希望缩放从哪个锚点生效 – 这对对齐有直接影响。
