web-dev-qa-db-ja.com

@mediaクエリを使用する場合、電話は無関係なクエリと画像をロードしますか？

CSSをモバイルスタイリングに基づいて、_@media_クエリを使用して、徐々に大きくなるディスプレイ（タブレット、デスクトップなど）に使用すると、モバイルデバイスはデスクトップスタイルを使用しますか？

通常、モバイルデバイスは、特定のメディアサイズに適用されなくても、すべての画像を読み込むと考えています。つまり、すべての画像を読み込み、クエリベースのスタイルシートと一致しない画像を非表示にします。

私がやろうとしているのは、サイトのより大きなバージョンに1つの背景を使用することです。

_.splash {
    background: #1a1a1a url('/assets/imageLarge.png') no-repeat;
}
_

およびモバイル版の別の：

_.splash {
    background: #1a1a1a url('/assets/imageSmall.png') no-repeat;
}
_

メディアクエリの前にモバイルCSSを適用し、@media screen and (min-device-width: 481px) {...}などのクエリを使用して以下の大きなメディアCSSを追加すると、モバイルデバイスも大きな画像を読み込みますか？

csscss3mobilepage-load-time
39
ChaBuku Bakke

動作はブラウザに依存しますが、iOS SafariおよびAndroid Chromeはメディアクエリを尊重し、該当するメディアクエリの背景画像のみをダウンロードします。

この動作を検査する場合は、Mobitest（ http://mobitest.akamai.com/ ）またはテザーデバイスでページを読み込んでみてください。

別個のCSSファイルを使用する場合（そして、あまりお勧めしません）、ブラウザはそれらを必要としない場合でもそれぞれをダウンロードします。これはCSSOMの制限です。一部のブラウザ（例： WebKitおよびBlinkベースのものはスタイルシートに優先順位を付けるので、ページのレンダリングに必要なものが最初にダウンロードされ、他のいくつかは後でダウンロードされます。

注意が必要なことの1つは、多くの状況でダウンロードが妨げられないため、コンテンツイメージにはdisplay：noneがあることです。ティム・カドレツは、ここでさらに詳しく調べます： http://timkadlec.com/2012/04/media-query-asset-downloading-results/

35
Andy Davies

Tim Kadlecはこのための素晴らしい研究をまとめました– メディアクエリとアセットのダウンロード結果

特定の質問はテスト＃4で回答されます。結果はむらがあります。両方の画像に対してメディアクエリを実行する方が良いでしょう。

8
blogjunkie

これは大きくブラウザに依存するように聞こえますが、その価値のあるモバイルブラウザはロードしないことでデータ使用量を削減しようとすると思います対象外としてマークされている画像（および場合によってはスタイルシート全体をロードしていない）。さらに、多くのモバイルブラウザーは、モバイルブラウザーとして認識されないことを好みます。 iPadでサイトを開くと嫌いなのはわかっています。モバイルスタイルシートを使用すると、9.7インチの画面に単一列のサイトの細いスライバーが表示されます。

そのため、メディアクエリは信頼できませんが、それでも価値があります（責任を持って使用する限り、実際には何も害はありません）。テストを行う時間です！

最新のデスクトップブラウザのほとんどには、開発者ツールが同梱されています。私の現在のお気に入りは、FireFoxの暗くてきれいなWebインスペクターです（3Dビューは特に死ぬべきです）。しかし、モバイルではどうでしょうか？モバイルユーザーの大部分は、開発ツールが付属しているブラウザではありません。

いくつかのオプションがあります：

  • Firebug Lite はモバイルブラウザーでいくつかの結果が混在しますが、他のインスペクターが利用できないほとんどの場合に優れた選択肢です。 iOSで動作するようです およびHTML5をサポートする他のモバイルブラウザー。
  • この質問 は、「weinre」と呼ばれるものの使用を提案します。私はそれを使用したことがありませんが、それは十分に合法的に見えます。
  • いくつかの特定のブラウザのみをターゲットに設定しても問題ない場合、多くの開発者ツールが含まれています。 Google Chrome Androidの場合 ！

何を選んでも、何らかの種類のアセットビューアーを探します。おそらくタイムラインビュー。ページのロード内容、ロードした順序、ロードにかかった時間を確認できるあらゆる種類のツール。

幸運を！

3
Sandy Gifford