34

在 HTML 网站上，您有一个固定元素，如下所示：

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

它有这个 CSS：

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

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

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

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

4

3 回答 3

26


我根据这个答案编写的这个答案对话框小部件库的演示。
对话框小部件的演示在移动设备上试用，放大并点击链接。

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

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

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

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

这会将元素重新缩放回相对于当前视口缩放比例为 1 的缩放比例，但它可能仍然错误地放置在页面上。这意味着我们必须为其位置获取新值。屏幕上实际发生的情况取决于元素的 CSS 位置值，其fixed行为与移动 Safari 不同absolute，特别是在移动 Safari 上，fixed位置在页面缩放时会增加平滑效果，这会因此产生一些不便的问题 - 我建议将 100% 内容高度元素作为relative预期缩放元素的父元素，然后在脚本中，将元素absolute放置在父元素内部。以下值适用于此示例演示：

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

您可能还需要注意使用transform-originCSS 属性，具体取决于您希望缩放从哪个锚点生效 - 这对对齐有直接影响。

于 2014-05-15T16:09:59.373 回答
8

我希望做与@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。

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

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

于 2014-11-17T13:34:45.310 回答
-4

您缺少宽度属性，您可以使用诸如 max-width 和 max-height 之类的东西来帮助将框保持在您想要的大小。但是，缩放允许用户对页面进行非常精细的处理，因此他们总是有可能遇到这个问题。

#fixed { height:150px; width: 200px; max-width: 200px; max-height: 150px; position:fixed; top:0; left:0; z-index:10000; }
于 2013-03-05T20:37:04.793 回答