logo标签列表

禁用一个 div 的缩放功能，但允许页面上的另一个 div 进行缩放。

csshtmlzoomingfixed
48
有没有办法禁用网站上特定元素的缩放，比如说一个div？例如，如果我想让页面可以缩放，但是#Header div不能缩放，有什么方法让其中一个可缩放，而另一个不可缩放？
基本上，在移动设备上进行缩放时，它也会将头部一起缩放，但我希望头部始终保持固定大小（不可缩放）。
我知道你可以使用以下代码来总体禁用缩放：
<meta content='width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;' name='viewport' />

1
如果您缩放整个页面或特定的页眉？或者更进一步，如果您只触摸页眉或整个页面？顺便问一下：为什么您想要这样做？访问者无法看到完整的页面...有点糟糕，是吧？ - yckart
1
遇到了同样的问题，并且能够（大部分）解决它：https://dev59.com/pobca4cB1Zd3GeqPcvdx#27991099 - flexponsive
5个回答
7

如果没有巧妙的技巧，你是无法做到这一点的。

然而，您可以（并且应该）使用以下CSS来修复移动设备上的缩放问题：

header {
    position: fixed;
    ...
}

@media only screen and (max-width: 720px) {
    header {
        position: absolute;
    }
}

当显示宽度小于或等于720像素时，此代码启用position: absolute，并且页眉成为页面的一部分，而不是固定在顶部。

从理论上讲是有可能的，请查看以下链接中的答案：https://dev59.com/x2Up5IYBdhLWcg3wf3us - ido
这是一个类似的问题，有相同的解决方案吗？ http://stackoverflow.com/questions/29674936/how-to-prevent-zoom-in-inside-a-popups-on-jquery-mobile >> 对我没有用 - the_farmer
使用此链接检测触摸和混合触摸/鼠标设备，然后将标题或固定元素的样式值更改为absolute。这样，在移动设备或触摸输入设备上缩放时，固定元素不会破坏网站的其余部分，而是可以根据浏览器、操作系统和用户规格进行本地缩放（缩放级别等）。 - lowtechsun
1
我甚至可以说，通常情况下，对于桌面、移动和混合触摸/鼠标设备，用户缩放设置应该固定为绝对值。未来的解决方案是让浏览器和操作系统处理缩放，这样用户就会感到满意，同时也保证了可访问性。请记住，当页面被缩放时，使其看起来响应式并不是你的责任！这是用户的决定，而且用户想要缩放页面的每个部分，而不仅仅是内容。因此，排除某些div元素的缩放并不是一个好的做法。 - lowtechsun
1
我尝试了，但它没有起作用 @AleksejKomarov。你能提供一个可运行的示例吗？（不要使用 SO 片段，因为 SO 片段在 Android 手机上无法运行 - 我已经发布了关于此的元-SO 请求） - Basj
遗憾的是，它不适用于Chrome / Android 5：https://imgur.com/a/Yumvk - Basj
1
简而言之，您肯定可以做到这一点。您可以捕获窗口调整大小事件，并根据从各种新窗口和内部宽度和高度属性计算出的dpi更改来调整浮动div的大小。因此，当您放大时，您想要缩小浮动div，以保留原始dpi，反之亦然。这将是一个史诗般的小提琴 - 很快重新访问这个答案，因为我可能必须做这样的事情。已经注意到dpi存在一些跨浏览器的不一致性，所以很有趣。
@DominicCerisano，你能提供一个可运行的示例吗？这将非常有用，因为已接受的答案实际上并不起作用（请参见https://imgur.com/a/Yumvk）。 - Basj
正如我所提到的，这将是一项艰巨的工作，因为它需要为每个浏览器（Chrome、MOZ等）和平台（PC、移动设备等）进行单独的实现。 - Dominic Cerisano
有点破坏了缩放的意图。如果我（用户）想要缩放某些内容，那是我的决定，你（开发者）阻止我这样做会让我尽快离开该页面。 - clockw0rk
它实现了原帖中描述的预期缩放。 - Dominic Cerisano
1

面对相同的问题，最终禁用了平移/缩放功能。

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

并使用这个很棒的库有选择地重新启用它

https://soulfresh.github.io/pan-z/?path=/docs/pan-z--pan-z

无需太多配置即可完美运行。

我的HTML结构如下：

<body>
  <header>Sticky unzoomed header</header>
  <main id='main'>Zoomable content</main>
</body>

接着，我在主要元素上启用了平移缩放

const PanZ = require('@thesoulfresh/pan-z')
new PanZ().init(document.getElementById('main'))
1

我认为你不能直接这样做。一个可能的选择是通过js事件检测缩放并相应地缩放元素。

另一个选择是“破解”CTRL键以禁用网站上的缩放，但这是绝对不可取的。

-4
如果您正在使用Angular，有一种方法可以为您的标题div提供一个id，然后在控制器中编写以下代码：
document.getElementById("viewport").setAttribute('content','user-scalable=yes, width=device-width, minimum-scale=1, maximum-scale=1');
我在我的项目中使用过，效果很好。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接