CSS缩放在IE11中不起作用 [英] css zoom not working in ie11

问题描述

我正在使用角度构建应用。它应该可以在平板电脑和支持触摸的设备上运行。

I'm building an app using angular. It is supposed to run on tablets and touch-enabled devices.

我想让用户能够缩放/放大应用 ，适用于视力不好和手指笨拙的人。为此，我使用此脚本，当用户单击缩放按钮时执行该脚本：
这是代码

I want to give the user the ability to zoom/scale up the app, for those with bad eyesight and clumsy fingers. To do this I'm using this script, which is executed when the user clicks a zoom-button: Here is the code

<!--code start -->  
$scope.zoomLevel+= 0.1;

$('body').css({
   zoom: $scope.zoomLevel
});

这在Chrome浏览器中效果很好，但在都在IE11中。

This works perfectly in chrome, but does nothing at all in IE11.

我正在使用Twitter Bootstrap，Angular和jquery 。

在 jsFiddle 中进行测试时，我完全能够在IE中使用 zoom ，所以我猜我还是某个第三方库是在IE中设置一个会影响zoom属性的属性。

When testing it in jsFiddle I'm perfectly able to use zoom in IE, so I'm guessing that me, or some third party library is setting a property that affects the zoom property in IE.

• 这可能是什么？

• What could this be?

PS：我不介意它不能在Firefox中使用。此应用将始终在IE11中运行。

PS: I don't mind it not working in firefox. This app will always be run in IE11.

推荐答案

zoom 属性是一项较旧的功能，今天确实不应该利用。它的跨浏览器支持很差，不属于正式标准，因此，我（IE团队的工程师）会鼓励您找到一种更加符合标准的方法来向前发展。

The zoom property is an older feature that really shouldn't be leveraged today. It has poor cross-browser support, belongs to no formal standard, and as such I (an engineer on the IE team) would encourage you to find a more standards-compliant method for moving forward.

自版本9起，Internet Explorer已支持CSS转换和缩放功能。此特定功能具有更好的跨浏览器支持，并且足以满足您的需求。我创建了一个小提琴，同时显示缩放和缩放，以确认体验的相似性。

Since version 9, Internet Explorer has supported CSS Transforms, and the scale function. This particular feature has much better cross-browser support, and would adequately suffice for your needs. I've created a small fiddle that shows both zooming and scaling side-by-side, to confirm the similarity in the experience.

提琴： http://jsfiddle.net/jonathansampson/hy5vup49/2/

在评论中进行一些讨论之后，您指出了 zoom 与转换缩放之间的有效布局差异。如果您希望实现 zoom 跨浏览器的效果，我鼓励您考虑使用 em 或 rem 单位，并利用字体大小继承作为缩放机制。

After some discussion in the comments, you pointed out valid layout differences between zoom and transformational scaling. If you wish to achieve the effect of zoom cross-browser, I would instead encourage you to consider using em or rem units in your project, and leverage font-size inheritance as your zooming mechanism.

小提琴： http://jsfiddle.net/jonathansampson/024krs33/

这篇关于CSS缩放在IE11中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！