6
デフォルトのWebkitエンジン（デフォルトブラウザ、Dolphin HD、Amazon Kindle Fire Silkブラウザなど）を使用するブラウザでAndroid 2.3で動作するCSS3 2D変換を取得するのに問題があります。等）。 Android 2.3 Webkitエンジンは2D変換をサポートしています。私は正しく変換するために2D変換でいくつかのサイトを手に入れることができました。Android 2.3ブラウザがCSS3の2D変換をレンダリングできない
Android 2.3では2D変換との競合が発生する可能性がありますか？代わりに、Android 2.3 Webkitレンダリングエンジンを使用しているブラウザのためのCSSをターゲットにする良い方法はありますか？私はModernizrを使用していますが、この文脈では、Android 2.3ブラウザが2D変換をテストするので動作しません。
私のサイトはhttp://StevenGerner.comです。最初のページでは、-90deg（サイトタイトルとh2要素）の2つの要素を回転していますが、どちらもAndroid 2.3のブラウザでは回転しません。私は他のCSS変換を試みたこともありますが、何も変わっていないようです。ページ全体を基本的なものにすると、変換は完璧に機能するので、おそらく私のサイトには他にもいくつかの矛盾があります。何が分かりません！ここでの変換に固有のCSSです：
//Applied to the h2 element which says 'howdy' at the top of the page
#about-front h2 {
display: inline-block;
float: left;
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=4)"\9;
-webkit-transform: rotate(-90deg);
-webkit-transform-origin: 170% 170%;
-moz-transform: rotate(-90deg);
-moz-transform-origin: 170% 170%;
-ms-transform: rotate(-90deg);
-ms-transform-origin: 170% 170%;
-o-transform: rotate(-90deg);
-o-transform-origin: 170% 170%;
transform: rotate(-90deg);
transform-origin: 170% 170%;
width: 1em;
text-shadow: -1px 0 #777, 0 2px #333, 2px 0 #333, 0 -1px #777;
}
//Applied to the site title with a media query between 500px and 750px
div#site_name {
display: block;
line-height: 0.85em;
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=4)"\9;
-webkit-transform: rotate(-90deg);
-webkit-transform-origin: 160% 130%;
-moz-transform: rotate(-90deg);
-moz-transform-origin: 160% 130%;
-ms-transform: rotate(-90deg);
-ms-transform-origin: 160% 130%;
-o-transform: rotate(-90deg);
-ms-transform-origin: 160% 130%;
transform: rotate(-90deg);
transform-origin: 160% 130%;
}
問題もアンドロイド2.2に請求することができます。しかし、私は現在2.2のデバイスをテストしていません。
私は本当にご意見、ご提案、アドバイスありがとうございます！これは私をナットにしている！
束の周りいじりの後、私は最終的にアップしたものを考え出しました。この奇妙なエラーは、カスタム設定のビューポートから発生します。 iOSとAndroid用のカスタムビューポートを提供する場合は、 'user-scalable = yes'を設定する必要があります。 user-scalableがnoに設定されている場合、このエラーが表示されます。例えば、 ' "などの表示は正しく表示されません。 – user1634149
http://caniuse.com/#feat=transforms3dここをクリック –
Androidデバイスのメタビューポートに 'target-densitydpi = device-dpi'を追加することもできます。 –