我正在 phonegap 中为 android 构建一个应用程序，但我遇到了使用 css 旋转 div 的问题。
我在这里发现了一个类似的问题：
CSS rotation not applied in Android 4.0 webview
我有 2 台 Android 设备，可以在上面测试我的应用。第一个是带有android 4.0.4 的Sony Xperia U。在此设备上，该应用程序可以完美运行。
另一台设备是带有android 2.3.5 的HTC Desire。该设备的 css 旋转存在问题。当页面加载时，图像会正确旋转，但会立即变回“正常”。
我使用的 css 规则是 - webkit-transform:rotate(90); 在普通 div 上。
会不会是安卓版系统的问题？
我无法解决这里的问题，旋转似乎可以在第二台设备上工作，但只能持续一秒钟左右。
任何建议将不胜感激:)。
【问题讨论】：
标签： android css cordova rotation
Android 2.x seems to support CSS3 transforms 带有 -webkit- 前缀，但有一个问题。
这个奇怪的错误来自自定义设置视口。如果为 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">
会显示不正确
【讨论】：
[更新]
为防止您的 div 恢复到原来的状态，请尝试将 -webkit-animation-fill-mode: forwards; 添加到您的 div 的 css 中：
#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 添加一个类以修复最终状态。
【讨论】：
试试这个：
@media screen and (orientation:portrait) { … }
@media screen and (orientation:landscape) { … }
媒体查询的 CSS 定义位于 css3 documentation
【讨论】：
我已经尝试了所有可能的解决方案，它只在我使用 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 之前的任何设备
【讨论】：
90deg 而不仅仅是90。