javascript - 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 Transforms 和缩放功能。此特定功能具有更好的跨浏览器支持，足以满足您的需求。我创建了一个并排显示缩放和缩放的 fiddle ，以确认体验的相似性。

fiddle :http://jsfiddle.net/jonathansampson/hy5vup49/2/

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

fiddle :http://jsfiddle.net/jonathansampson/024krs33/