android - CssローテーションはAndroidでは適用されません（phonegap）

Question

phonegapでAndroid用のアプリを作成していますが、cssでdivを回転させる際に問題が発生します。私はここで同様の質問を見つけました：
Android4.0ウェブビューに適用されていないCSSローテーション

アプリをテストできるAndroidデバイスが2つあります。1つ目はSonyXperiaUandroid 4.0.4です。このデバイスでは、アプリは完全に機能します。

もう1つのデバイスは、HTCDesireandroid 2.3.5です。このデバイスには、cssの回転に問題があります。ページが読み込まれると、画像は正しく回転しますが、すぐに「通常」に戻ります。

私が使用しているcssルールは-webkit-transform:rotate(90);通常のdivです。これは、Androidバージョンのシステムの問題でしょうか？

ここで問題を把握することはできません。回転は2番目のデバイスで機能しているようですが、1秒程度しか機能しません。

任意の提案をいただければ幸いです:)。

score 7 · Accepted Answer

この奇妙なエラーは、カスタムセットビューポートから発生します。iOS および Android 用のカスタムビューポートを提供する場合は、を設定する必要がありますuser-scalable=yes。がnouser-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">

正しく表示されません

score 0 · Accepted Answer

これを試してください：

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

score 0 · Accepted Answer

考えられるすべての解決策を試しましたが、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 より前のデバイスを除外しました。

4 に答える 4