Android 2.3 浏览器无法渲染一些 CSS3 2D 变换答案

【问题标题】：Android 2.3 Browser Fails to Render some CSS3 2D TransformsAndroid 2.3 浏览器无法渲染一些 CSS3 2D 变换
【发布时间】：2013-08-30 16:09:51
【问题描述】：

我无法让 CSS3 2D 变换在 Android 2.3 中与任何使用默认 webkit 引擎的浏览器（例如默认浏览器、Dolphin HD、Amazon Kindle Fire Silk 浏览器等）一起工作。 Android 2.3 webkit 引擎确实支持 2D 变换，我已经能够让一些具有 2D 变换的站点正确呈现，但不是我的站点！

有谁知道 Android 2.3 中可能导致与 2D 转换发生冲突的任何问题？或者，有没有一种好方法可以只针对使用 Android 2.3 webkit 渲染引擎的浏览器的 css？虽然我使用的是 Modernizr，但在这种情况下它不起作用，因为 Android 2.3 浏览器对 2D 转换测试呈阳性。

这是我的网站：http://StevenGerner.com。在首页上，我将两个元素旋转 -90 度（站点标题和一个 h2 元素），并且两者都不会在 android 2.3 浏览器上旋转。我什至尝试过其他 css 转换，但似乎没有任何转换。如果我将整个页面剥离为基本页面，那么转换工作完美无缺，所以我的网站上可能还有其他冲突，我就是不知道是什么！这是特定于转换的 CSS：

//Applied to the h2 element which says 'howdy' at the top of the page
    #about-front h2 {
        display: inline-block;
        float: left;
        -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=4)"\9;
        -webkit-transform: rotate(-90deg);
        -webkit-transform-origin: 170% 170%;
        -moz-transform: rotate(-90deg);
        -moz-transform-origin: 170% 170%;
        -ms-transform: rotate(-90deg);
        -ms-transform-origin: 170% 170%;
        -o-transform: rotate(-90deg);
        -o-transform-origin: 170% 170%;
        transform: rotate(-90deg);
        transform-origin: 170% 170%;
        width: 1em;
        text-shadow: -1px 0 #777, 0 2px #333, 2px 0 #333, 0 -1px #777;
    }

//Applied to the site title with a media query between 500px and 750px
    div#site_name {
        display: block;
        line-height: 0.85em;
        -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=4)"\9;
        -webkit-transform: rotate(-90deg);
        -webkit-transform-origin: 160% 130%;
        -moz-transform: rotate(-90deg);
        -moz-transform-origin: 160% 130%;
        -ms-transform: rotate(-90deg);
        -ms-transform-origin: 160% 130%;
        -o-transform: rotate(-90deg);
        -ms-transform-origin: 160% 130%;
        transform: rotate(-90deg);
        transform-origin: 160% 130%;
}

该问题也可能适用于 Android 2.2；但是，我目前没有要测试的 2.2 设备。

如果有任何想法、建议和建议，我将不胜感激！这让我发疯了！

【问题讨论】：

搞了一堆之后，我终于弄明白了怎么回事。这个奇怪的错误来自自定义设置视口。如果为 iOS 和 Android 提供自定义视口，则必须设置 user-scalable=yes。如果 user-scalable 设置为 no，则会出现此错误。例如，<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=yes"> 可以正常工作，但 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> 之类的内容会显示不正确。
caniuse.com/#feat=transforms3d 在这里查看
您还可以将 target-densitydpi=device-dpi 添加到 Android 设备的元视口中。
请检查这个答案stackoverflow.com/questions/15243096/…

标签： android css css-transforms mobile-webkit webkit-transform

【解决方案1】：

注意事项

Internet Explorer 5.5 或更高版本支持专有矩阵过滤器可以用来达到类似的效果。

Gecko 14.0 删除了对 skew() 的实验性支持，但它是出于兼容性原因，在 Gecko 15.0 中重新引入。照原样非标准，将来可能会被删除，不要使用它。

Android 2.3 有一个错误，输入表单在输入时会“跳跃”，如果任何容器 div 都有一个 -webkit-transform。

来源：https://developer.mozilla.org/en-US/docs/Web/CSS/transform

【讨论】：