1

根据 caniuse.com 的说法,Android 应该从 3.0 版开始完全支持 css 3d 转换。当我运行以下测试之一(例如在 Android 4.1、Samsng Galaxy 上)时,它们返回 true。但是,当我查看使用 3d 转换和 preserve-3d 的页面时,它不起作用。例如:

http://jsfiddle.net/bartaz/e3Rjz/show/

测试1:

(function(Modernizr, win){
    Modernizr.addTest('csstransformspreserve3d', function () {

        var prop = Modernizr.prefixed('transformStyle');
        var val = 'preserve-3d';
        var computedStyle;
        if(!prop) return false;

        prop = prop.replace(/([A-Z])/g, function(str,m1){ return '-' + m1.toLowerCase(); }).replace(/^ms-/,'-ms-');

        Modernizr.testStyles('#modernizr{' + prop + ':' + val + ';}', function (el, rule) {
            computedStyle = win.getComputedStyle ? getComputedStyle(el, null).getPropertyValue(prop) : '';
        });

        return (computedStyle === val);
    });
}(Modernizr, window));

测试 2:

Modernizr.addTest('csstransformspreserve3d', function () {

  var prop,
      val,
      cssText,
      ret;

  prop = 'transform-style';
  if ('webkitTransformStyle' in document.documentElement.style) {
    prop = '-webkit-' + prop;
  }
  val = 'preserve-3d';
  cssText = '#modernizr { ' + prop + ': ' + val + '; }';

  Modernizr.testStyles(cssText, function (el, rule) {
    ret = window.getComputedStyle ? getComputedStyle(el, null).getPropertyValue(prop) : '';
  });

  return (ret === val);
});

现在我不知道问题是什么。测试不起作用吗?Android 4.1 不支持“preserve-3d”吗?还是有其他问题?

4

2 回答 2

3

您遇到的是模拟器中的缺陷;您的测试用例在运行 Android 4.0.4 和 4.1.2 的真实设备上运行良好。Android 模拟器 GPU 是在没有实现所有必需 3D 功能的软件中模拟的,这就是即使渲染错误,功能测试也会成功的原因。(浏览器支持它们,但底层 GPU 仿真不支持。)

于 2013-06-30T02:50:37.243 回答
1

如果您使用的是内置浏览器,请检查您使用的设备是否启用了 gpu,或者是否有 gpu?

因为 3d 变换完全依赖于浏览器 + 硬件。

它使用硬件资源(图形处理单元),因此如果设备没有 GPU 或禁用 GPU,它将不会渲染任何 3d 效果。

请检查这部分,如果可能的话回复..

我希望这会做..

于 2013-07-01T03:40:53.780 回答