4

我正在 phonegap 中为 android 构建一个应用程序，但我遇到了使用 css 旋转 div 的问题。我在这里发现了一个类似的问题：
CSS rotation not applied in Android 4.0 webview

我有 2 台 android 设备，我可以在上面测试我的应用程序。第一个是带有android 4.0.4. 在此设备上，该应用程序可以完美运行。

另一台设备是 HTC Desire，带有android 2.3.5. 该设备的 css 旋转存在问题。当页面加载时，图像会正确旋转，但会立即变回“正常”。

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

我在这里无法解决问题，旋转似乎在第二台设备上起作用，但只能持续一秒钟左右。

任何建议，将不胜感激 ：）。

4

4 回答 4

7

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">

会显示不正确

于 2013-03-06T09:29:50.317 回答
1

[更新]

为防止您的 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 添加一个类以修复最终状态。

于 2013-03-06T09:30:43.150 回答
0

试试这个：

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

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

于 2013-03-06T10:26:14.860 回答
0

我已经尝试了所有可能的解决方案，它只在我使用 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 之前的任何设备

于 2013-03-21T08:29:51.050 回答