在触摸屏上缩放时，防止固定元素的大小调整
在HTML网站上，你有一个像这样的固定的元素：
<div id="fixed"> <p>Some content</p> </div> 它有这个CSS：
#fixed { height:150px; position:fixed; top:0; left:0; z-index:10000; }
当您在移动设备（或任何启用了触摸屏的设备）上查看此页面，并捏住屏幕进行放大时，固定元素会随着所有其他内容（变大）一起放大。 当你放大足够的距离，它变得如此之大，几乎完全覆盖了它下面的所有内容。
一个实际的用例将是一个UI，就像顶部的固定导航栏，或者屏幕angular落的浮动button。
你怎么能阻止单个元素在浏览器中resize，并始终保持相同的大小？
演示这个答案
我根据这个答案写的对话窗口部件库 。
对话框小部件的演示在移动设备上进行试用，放大并点击链接。
虽然手势事件似乎保存了一些关于某事的比例因子的元数据，但我们可能会更好地控制并手动find它。 由于我们希望在用户在现场移动时保持效果，因此我们需要在每个滚动事件中重新计算。
window.addEventListener('scroll', function(e){ /* coming next */ })
我们计算缩放因子并将其作为CSS3变换应用到重定标的元素：
el.style["transform"] = "scale(" + window.innerWidth/document.documentElement.clientWidth + ")";
这会将元素重新缩放到相对于当前视口缩放的缩放比例1，但可能仍然错误地放置在页面上。 这意味着我们必须为它的位置获得新的价值。 屏幕上实际发生的事情取决于元素的CSS位置值， fixed会performance出与absolute不同的行为，特别是在移动Safari上， fixed位置在页面放大的同时具有增加的平滑效果，这就造成了一些不便的问题 -我build议有一个100％的内容高度的元素作为您的目标缩放元素的relative父，然后在您的脚本中，您的元素absolute位于父母的内部。 以下值适用于此示例演示：
overlay.style.left = window.pageXOffset + 'px'; overlay.style.bottom = document.documentElement.clientHeight - (window.pageYOffset + window.innerHeight) + 'px';
您可能还要注意使用transform-origin CSS属性，具体取决于您希望缩放生效的锚点 – 这对alignment有直接影响。
我正在做同样的事情，@ bobsoap试图做，但我的解决scheme如下：
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，以满足你的需求。
我有一个页面上的2个div（左和右）左边的div有一个固定的滚动菜单，右边有小文本和图像。 我想捏/缩放，只有正确的div缩放，使用户可以更好地阅读文字，如有必要。 而不是使整个视口可缩放，禁用我的左div缩放，我做的恰恰相反：通过TouchSwipe插件只让我的右div可缩放。
如果有人对我如何实现TouchSwipe插件感兴趣，我会分享我的代码。
对于iOS 10，可以取消touchmove事件。
element.addEventListener("touchmove", (ev) => { let zoomFactorX = document.documentElement.clientWidth / window.innerWidth; let zoomFactorY = document.documentElement.clientHeight / window.innerHeight; let pageHasZoom = !(zoomFactorX === 1 && zoomFactorY === 1); if(pageHasZoom) { // page is zoomed ev.stopPropagation(); ev.preventDefault(); } });
这个microjs库可能会有帮助： Transe
这是一个演示 。
唯一真正的缺点是糟糕的文档，所以使用起来有点棘手。 不过，为了达到同样的目的，我能满足所有需求（在我的情况下，在一个Cordova应用程序中）
你缺less一个宽度属性，你可以使用像最大宽度和最大高度的东西，以帮助保持框你想要的大小。 但是，缩放可以让用户对页面进行精细的处理，所以总会遇到这样的问题。
#fixed { height:150px; width: 200px; max-width: 200px; max-height: 150px; position:fixed; top:0; left:0; z-index:10000; }
