私は "jqueryモバイルを備えた機能豊富なモバイルWebサイトを構築しています。すべてのビューにわたって、いくつかのCSSトランジション、ボックス影、グラデーションがあります...
私が心配しているのは、私のウェブサイトを閲覧している低学年の電話。多くの携帯電話がトランジションをサポートしていますが、ひどいフレームレートで表示します。私は古いAndroid、最初のiPadなどを考えています。そのため、この種のハードウェアでは無効にします。
今私がしているのは、ユーザーエージェントに応じてこのルールを適用することです。
* {
box-shadow: none !important;
-webkit-box-shadow: none !important;
transition: none !important;
-webkit-transition: none !important;
moz-transition: none !important;
-ms-transition: none important;
-o-transition: none !important;
}
しかし、これはまったく信頼できません。 Android 4を搭載した電話機はユーザーエージェントテストに合格しますが、それでもひどい性能を発揮する可能性があります。言うまでもありませんが、ユーザーは自分のバージョンのAndroidをアップグレードすることも、古いハードウェアでカスタムROMを使用することもできます。そして最後に、彼らはいつでも自分のユーザーエージェントを変更することができます。
私が提案したもう一つのテストは空のページで幅/高さの遷移を確認し、時間内に完了したかどうかを確認します。私はこれがうまくいくのを見ることができるけれども、私が一般的な使用がDOMのはるかに多くの要素を含むのでそれがどれほど信頼できるか確信が持てない。
私はあまり使わないようにしたいと思います私はCSS3効果の最適化を念頭に置いてこのWebサイトを構築したので、最適化を推奨しないでください。
回答：
回答№1は1解決策はいくつかありますが、クライアントデバイス上でのみ実行される解決策が必要だと思います。
これが事実である場合それからこれを使用して下さい：
まず、Modernizerをダウンロード/使用する必要があります。 http://modernizr.com/
これを使用して、どのデバイスが新しいHTML5 / CSS3オプションをサポートしているかを検出できます。 あなたがチェックする必要があるものは次のとおりです：インラインSVGサポート、あなたはここで公式のドキュメンテーションの中でそれを検出できるのを見つけるでしょう： http://modernizr.com/docs/#features-html5
Android（3.0以前）とiOS（5.0以前）の古いバージョンではサポートされていません。 ここに： http://caniuse.com/#feat=svg-html5
これは私が知っている唯一の信頼できるクライアントサイドソリューションです。もっと具体的な検出が必要な場合は、サーバーサイドの検出を使用する必要があります。現在最良のものはWURFLですが、それはあなたに費用がかかります。
私の他の人でそれについてもっと読む 回答.