9

如何在某些元素上使用 css 或 javascript 禁用 ctrl/wheel 缩放效果。我创建了一个在应用缩放效果时会失真的菜单栏。我想仅对某些元素禁用它。

4

4 回答 4

10

更好的主意：设计您的布局，使其足够强大以处理此类更改。即使您修复了字体大小（一开始不应该这样做），您也无法禁用它们，因此您不妨优雅地响应缩放。

事实是，如果浏览器对所有元素进行同等缩放，那么您的页面应该看起来和工作方式与以前完全相同（除了，你知道，更大），除非您在设计中的某个地方采取了一些懒惰的快捷方式。

于 2009-02-12T18:10:00.293 回答
3

IE 和 Firefox 的解决方案：

var obj=document.body;  // obj=element for example body
// bind mousewheel event on the mouseWheel function
if(obj.addEventListener)
{
    obj.addEventListener('DOMMouseScroll',mouseWheel,false);
    obj.addEventListener("mousewheel",mouseWheel,false);
}
else obj.onmousewheel=mouseWheel;

function mouseWheel(e)
{
    // disabling
    e=e?e:window.event;
    if(e.ctrlKey)
    {
        if(e.preventDefault) e.preventDefault();
        else e.returnValue=false;
        return false;
    }
}
于 2011-02-15T08:33:38.740 回答
0

你不能；这是浏览器功能，而不是文档功能。

话虽如此，如果你使用 CSS 的 style="font-size: 9px;"，你可以覆盖文本大小。浏览器缩放仍然有效，并且浏览器字体大小的更改将产生一些重新格式化的效果。

于 2009-02-12T18:07:00.597 回答
0

这是我的问题：我一直使用 em 进行设计，它们的工作原理很神奇。但是通过整页缩放，我的背景也被放大了。如果我有一个重复的图案作为主要背景，我不希望它变得像素化。它们确实帮助我们避免了一些工作，比如实现 Doug Bowman 的 CSS 滑动门，但现在我不得不忍受模糊的标签。

我还有另一个全页缩放问题，至少在今天的浏览器中实现了：我是那些将我的浏览器设置为 12pt 字体而不是 16pt 的“那些”人之一。每隔一段时间，我就会遇到一个（当然是固定宽度的）网站，它将文本调整为很小的大小（我猜他们在尝试制作时使用 0.9em 或其他东西，而不是 14px更小）。我通常只会放大一两个档次，一切都会好起来的。但是，使用整页缩放时，图像的缩放比例很差，而且我有一个水平滚动条。

第一个问题的解决方案是允许背景图像标签中的某种处理指令禁止对该元素进行整页缩放。或者可能是文档头部的某些内容。如果浏览器真的想要公平，他们也可以给用户一个他们可以设置的选项来覆盖 no-zoom 指令，所以如果他们愿意，他们可以无论如何都可以缩放。第二个问题的解决方案是全页缩放首先以 16px/em 的速率将所有 px 转换为 em，然后缩小到您的文本大小，而不是使用您的文本大小将 px 转换为 em根据。然后向上滚动到 16 像素将使图像按预期大小完美。

于 2009-05-30T04:27:55.127 回答