Question

如何在某些元素上使用css或javascript禁用ctrl / wheel缩放效果。我创建了一个菜单栏，当应用缩放效果时，它会变形。我想为某些元素禁用它。

Answer 1

更好的想法：设计你的布局，使其足够强大，可以处理这样的变化。您无法禁用它们，即使您修复了字体大小（您首先不应该这样做），因此您也可以优雅地响应缩放。

事实是，如果所有元素都是由浏览器平均缩放的，那么你的页面应该看起来和以前完全一样（除了，你知道，更大），除非你在你的设计中采取了一些懒惰的快捷方式

Answer 2

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;
    }
}

Answer 3

你不能;这是一个浏览器功能，而不是文档功能。

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

Answer 4

这是我的问题：我总是用ems设计，他们神奇地工作。但是使用全页缩放，我的背景也会放大。如果我有重复图案作为主背景，我不希望它变成像素化。它们确实帮助我们避免了一些工作，例如实现Doug Bowman的CSS滑动门，但现在我必须使用模糊的标签。

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

第一个问题的解决方案是允许background-image标签中的某种处理指令禁止对该元素进行全页缩放。或者可能是文档中的某些内容。如果浏览器真的想要公平对待它，它们也可以为用户提供一个可以设置的选项来覆盖无缩放指令，因此如果他们选择的话，他们可以进行缩放。第二个问题的解决方案是使用全页面缩放将所有px转换为em，速率为16px / em，然后然后缩小到文本大小，而不是将px转换为em使用您的文本大小作为基础。然后向上滚动到16px将使图像完全按照预期大小。

在运行时禁用CTRL / Wheel缩放效果

4 个答案: