CSS缩放在IE11中无法工作

Question

3

我正在使用 Angular 构建一个应用程序。该应用程序应该能够在平板电脑和触摸设备上运行。

我想要让用户有能力放大/缩小应用，以供那些视力不好或手指笨拙的用户使用。为此，我正在使用以下脚本，当用户单击缩放按钮时将执行：

这里是代码：

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

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

这在谷歌浏览器中完美运行，但在IE11中根本没有任何反应。

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

当我在jsfiddle中测试它时，我可以完美地在IE中使用缩放功能，所以我猜测我或某个第三方库设置了一个影响IE缩放属性的属性。

附注：我不介意它在火狐浏览器中无法工作。此应用程序将始终在IE11中运行。

- Simon Bob

2

"...并不推荐在生产环境中使用。" 你可能想尝试使用transform属性，以及scale()函数代替。 - Pointy

1

scale()的行为并不完全相同。它不会影响我的应用程序布局。我需要它的行为像使用浏览器缩放一样。此外，scale()在IE11中也无法工作。 - Simon Bob

就像我所说的，这个应用程序具有非常特定的硬件目标，因此只要在IE11中运行正常，我就不会在意跨浏览器问题。 - Simon Bob

它在IE10中运行良好，因此我怀疑它也能在IE11中运行。 - Pointy

CodePen在IE10和IE11中对我来说运行良好。 - Varedis

显示剩余4条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Sampson · Accepted Answer

zoom 属性是一种老旧的特性，现在真的不应该再使用了。它在跨浏览器支持方面表现差，没有任何正式标准，因此我（IE团队的工程师）鼓励您寻找更符合规范的方法来前进。

自版本9以来，Internet Explorer已经支持CSS转换和缩放功能。这个特定的功能具有更好的跨浏览器支持，并且可以足够满足您的需求。我创建了一个小的fiddle，展示了缩放和缩放并排显示，以确认体验上的相似之处。

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