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

在HTML网站上，有如下固定元素：

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

当您在移动设备（或任何支持触摸屏的设备）上查看此页面，并捏住屏幕进行放大时，固定元素会与所有其他内容一起放大（它会变大）。当你放大足够远时，它会变得非常大，几乎完全覆盖了它下面的所有内容

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

---

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

您缺少一个宽度属性，可以使用“最大宽度”和“最大高度”来帮助保持框的大小。然而，缩放允许用户对页面进行非常精细的处理，所以他们总是有机会遇到这个问题

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

.
在手机上试用，放大并点击链接

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

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

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

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

这会将元素重新缩放回相对于当前视口缩放的缩放比例1，但很可能它仍然错误地放置在页面上。这意味着我们必须为它的位置获取新的值。屏幕上实际发生的情况取决于元素的CSS位置值，

fixed

的行为与

absolute

不同，特别是在移动Safari上，

fixed

位置在页面缩放时具有额外的平滑效果，这给这个原因带来了一些不方便的问题-我建议将100%内容高度元素作为预期缩放元素的

相对

父元素，然后在脚本中，将元素

绝对

放在父元素的内部。以下值适用于此示例演示：

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

---

您可能还需要注意使用

transform origin

CSS属性，这取决于您希望缩放从哪个锚点生效-这对对齐有直接影响。

我希望做与@bobsoap尝试做的相同的事情，但是 我的解决方案如下：

1.禁用视口标记中的缩放：

2.使用如下插件：touchwipe.js:

并且只放大你想要的一个或多个Div&适合你的需要

我在一个页面上有两个div（左和右），左div有一个固定的滚动菜单，右div有小文本和图像。我想收缩/缩放，并且只有右div缩放，以便用户可以在必要时更好地阅读文本。我没有使整个视口可缩放并禁用左div上的缩放，而是做了完全相反的事情：通过TouchWipe插件仅使右div可缩放

---

如果有人对我如何实现TouchWipe插件感兴趣，我会在完成后与大家分享我的代码。

我不知道CSS/HTML是模仿自然和宇宙的；）我也在研究这个问题。阿里·巴萨姆的回答是胡说八道。这种效果主要用于响应性移动web广告和带有固定页眉页脚元素的移动UI工具包。广告示例：在缩放时从

fixed

切换到

absolute

。这样，您就可以根据用户的需要使用设备或浏览器缩放功能，让想要使用缩放功能的用户可以访问网站，而不必担心缩放级别或将来浏览器或设备/操作系统在缩放功能方面的变化。谢谢您的回答，但我相信您可能误解了这个问题。在缩放的情况下，“最大高度”没有任何特殊功能。此外，宽度对于问题并不重要，对于块级元素也不是绝对必需的。我认为您误解了这个问题-缩放是电话级功能，而不是代码级功能。你控制不了它，没有必要防守，塔米。我看你现在明白我要问的问题了。你最初的答案没有反映这一点。手机的变焦功能确实是我所追求的，只是我希望有办法控制它。这就是我的问题。再次感谢。是的，这真是太糟糕了，我还没有找到一个解决方案来阻止固定导航的缩放，同时让非固定元素的缩放。我有一个非常有效的用例来固定导航和缩放内容。我尝试过所有的变化，太棒了！这在android或windows mobile上有效吗？@mozgras这个例子应该在iPhone上有效，尽管它可能有很多现实问题。在回答这个问题之后，我创建了一个自定义的模式对话框，可以根据这个想法重新调整自身的大小并在屏幕上重新定位。我认为回购协议目前是私人的，但我会尽快将其公开。这是，这是一个公开的例子——事实上，您可能只需要从演示本身获取代码即可。@mystrdat您的库覆盖了哪些角落，而这个原始答案没有覆盖？此外，您还提到“可能有很多现实世界的问题没有解决”。你能详细说明一下吗？我已经在很多设备上测试过你的技术，效果令人惊讶well@ido在带有物理滚动条的浏览器上，缩放比例计算错误，Android stock和Safari处理

位置的差异：缩放时固定了
元素，不支持移动的网站。。据我所知，有很多。该库经过调整和优化，成为一个工作良好的对话框小部件，它利用了这种效果，而不仅仅是演示代码的简短概念证明（因为我们需要内部开发这样一个对话框）。我想可以制作一个离线库，它接受任何
假设
overlay.style.left = window.pageXOffset + 'px';
overlay.style.bottom = document.documentElement.clientHeight - (window.pageYOffset + window.innerHeight) + 'px';

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