在Android（PhoneGap）中未应用CSS旋转

Question

我正在使用phonegap为Android构建应用程序，但在使用CSS旋转div时出现了问题。我在这里找到了一个类似的问题：
CSS rotation not applied in Android 4.0 webview 我有两个Android设备可以测试我的应用程序。第一个是Sony Xperia U，使用android 4.0.4。在此设备上，应用程序完美地工作。

另一个设备是HTC Desire，使用android 2.3.5。该设备对CSS旋转存在问题。当页面加载时，图像被正确旋转，但立即恢复到“正常”状态。

我正在使用webkit-transform:rotate(90);的CSS规则在普通的div上进行操作。这可能是系统Android版本的问题吗？

我无法解决这个问题，旋转似乎在第二个设备上工作，但只有一秒钟左右。

欢迎提出任何建议 :)。

- Lordchapter

Answer 1

Android 2.x似乎支持带有-webkit-前缀的CSS3变换，但有一个注意点。

这个奇怪的错误来自于一个自定义的视口设置。如果你为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">

将会显示不正确

- George Katsanos

---

我已经设置了user-scalable=yes，但是这并没有改变任何事情 :) - Lordchapter

你有视口 bug 的来源吗？ - mikemaccana

Answer 2

[更新]

为了防止您的div返回到其原始状态，请尝试在div的css中添加-webkit-animation-fill-mode: forwards;：

#yourDiv {
  -webkit-animation-fill-mode: forwards; /* Set the last frame as persistent */
  -webkit-animation-name: rotate;
  -webkit-animation-duration: 1s;        /* Set the duration as you wish */
}

@-webkit-keyframes rotate {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(90deg);
  }
}

如果这不起作用，尝试将最终状态添加到#yourDiv -webkit-transform: rotate(90deg);。

如果仍然不起作用，您可以使用一些JS在动画结束时向您的div添加一个类来修复最终状态。

- Maen

---

我已经尝试过这个，旋转后，div 会自动调整回正常状态 :( - Lordchapter

Answer 3

我尝试了所有可能的解决方案，只有在使用webkit-transform:rotate(90);两次时才有效。

这是一个它如何工作的例子：

<div data-role="content" style="webkit-transform:rotate(90);">
<div style="webkit-transform:rotate(90);">Stuff to rotate</div>
</div>

当然，这在其他设备上并没有正常运行。

这不是一个真正的解决方案，但我只是排除了任何 Android 版本低于 4.0.4 的设备。

- Lordchapter

---

这只是一个hack，而不是解决方案。 - tnt-rox

它应该是90deg而不仅仅是90。 - andreszs

Answer 4

试试这个：

@media screen and (orientation:portrait) { … }
@media screen and (orientation:landscape) { … }

媒体查询的CSS定义在css3文档中。

- T.Baba