jquery - jquery确定浏览器中是否可以使用css缩放

Question

$(button).click(function(){
    if (Modernizr.zoom()) $('body').animate({ zoom: '200%'; }, 1000);
    else $('body').alternative();
});

正如你在上面看到的......我想在点击时放大我的页面。

顺便说一句：使用'zoom'（css）好吗？我不确定，因为我没有找到“缩放”（css）的任何好的描述。还是使用“缩放”（css）制作动画更好？

主要问题：有什么方法可以检测浏览器是否支持这个 css-'zoom'（或其他）功能？我正在使用 Modernizr，但在 Modernizr 中，无法检测“缩放”是否可用。

score 2 · Accepted Answer

如果有人需要...

我用modernzr看浏览器是否支持zoom属性

  if (Modernizr.testProp('zoom') === true) {
    someStuff()
  }

但为什么不使用transform？因为在这个特定的项目中，我需要缩放所有网站，制作类似于浏览器原生缩放的东西，并且当你transform在网站上使用 chrome 时会模糊所有字体，但你可以使用zoom它，它做得很好。

但是 Firefox 无法识别缩放属性，所以如果缩放可用，我使用缩放，如果不是，我使用transform缩放。

if (Modernizr.testProp('zoom') === true) {
  zoomWithCSS()
}
else {  
 zoomWithTransformScale()
}

score 1 · Accepted Answer

好的。我发现，使用 css zoom-property 并不好，因为它只适用于 IE 和一些较新版本的“真实”浏览器。如果我有一个带有百分比值的布局，它不会缩放，除非我也改变了宽度或高度的值，这不是很好。

但它确实适用于 css3 scale-property！因此我找到了Modernizr.csstransforms()特征检测（用于js）！

就是这样了！

2 回答 2