Css旋轉不應用於android（phonegap）

我正在爲phonegap中的android構建一個應用程序，並且存在用css旋轉div的問題。我發現了一個類似的問題在這裏：
CSS rotation not applied in Android 4.0 webview Css旋轉不應用於android（phonegap）

我有，我可以測試我的應用程序2個Android設備。第一個是索尼Xperia U與android 4.0.4。在這款設備上，該應用完美運行。

其他設備是一個HTC Desire與android 2.3.5。此設備在css旋轉時出現問題。加載頁面時，圖像旋轉正確，但立即回到「正常」。

我正在使用的css規則是 - webkit-transform:rotate(90);在正常div上。這可能是一個與系統的Android版本的問題？

我不能在這裏弄到問題，旋轉似乎在第二個設備上工作，但只有一秒鐘左右。

任何建議，將不勝感激:)。

來源

2013-03-06 Lordchapter

我已經試過各種可能的解決方案，當我使用WebKit的變換它僅適用：旋轉（90 ）;兩次。

下面是它是如何做工作的一個例子：

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

當然不過，這並沒有對ohter設備正常運行。

這不是一個真正的解決方案，但我只是排除了Android 4.0之前的任何設備。4

來源

2013-03-21 08:29:51 Lordchapter

這是一個黑客不是一個解決方案 – 2014-06-11 09:35:02

它應該是'90deg'而不是'90'。 – andreszs 2015-01-03 00:33:12

Android 2.x seems to support CSS3 transforms與-webkit-前綴，但有一個問題。

這個奇怪的錯誤來自自定義設置視口。如果您爲iOS和Android提供自定義視口，則必須設置user-scalable=yes。如果user-scalable設置爲否，則會顯示此錯誤。例如： <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-06 09:29:50

我已經設置了user-scalable = yes但是這並沒有改變一件事:) – Lordchapter 2013-03-06 09:50:40

這幫了我！ – zsitro 2013-05-21 15:26:57

您是否有視口錯誤的來源？ – mikemaccana 2013-12-10 13:53:12

[更新]

爲了防止您的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-06 09:30:43 Bigood

我已經嘗試過這一點，並在旋轉後，該div調整自己正常再次:( – Lordchapter 2013-03-06 09:50:13

@Lordchapter我更新了我的文章 – Bigood 2013-03-06 09:57:16

就試試這個：

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

媒體查詢的CSS定義是在css3 documentation

來源

2013-03-06 10:26:14

Css旋轉不應用於android（phonegap）

回答

相關問題