1。禁用缩放视口标记：

Question

在HTML网站上，您有一个固定的元素：

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

它有这个CSS：

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

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

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

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

Answer 1

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位置值，fixed的行为与absolute不同，而在移动版Safari中，fixed位置在页面上有一个额外的平滑效果是缩放，这会造成一些不便的问题 - 我建议将100％内容高度元素作为预期缩放元素的relative父元素，然后在脚本中定位元素absolute在父母的内心。以下值适用于此示例演示：

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

您可能还要注意使用transform-origin CSS属性，具体取决于您希望缩放生效的锚点 - 这会对齐效果。

Answer 2

我希望做同样的事情@bobsoap试图做但但是我的解决方案如下：

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＆amp;适合您的需求。

我在页面上有两个div（左和右）左边的div有一个固定的滚动菜单，右边有一个小文本＆amp;图片。我想要捏合/缩放并且只有正确的div缩放，以便用户可以在必要时更好地阅读文本。我没有使整个视口可缩放并禁用我左侧div的缩放，而是完全相反：只通过TouchSwipe插件使我的右侧div可缩放。

如果有人对我如何实施TouchSwipe插件感兴趣的话，我会分享我的代码。

Answer 3

你缺少一个宽度属性，你可以使用max-width和max-height之类的东西来帮助保持盒子你想要的大小。但是，缩放允许用户使用页面非常精细，因此他们总是有可能遇到这个问题。

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

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

3 个答案:

1。禁用缩放视口标记：

2。使用类似的插件：TouchSwipe.js：