css 缩放在 ie11 中不起作用

Question

我正在使用 angular 构建一个应用程序。它应该在平板电脑和支持触控的设备上运行。

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

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

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

这在 chrome 中完美运行，但在 IE11 中什么也不做。

我正在使用 twitter bootstrap、angular 和 jquery。

在jsFiddle 中测试时，我完全能够在 IE 中使用zoom，所以我猜是我或某些第三方库正在设置一个影响 IE 中缩放属性的属性。

• 这可能是什么？

PS：我不介意它在 Firefox 中不起作用。此应用程序将始终在 IE11 中运行。

Answer 1

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

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

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

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

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