プログレッシブ エンハンスメントを備えたモバイル ファーストの Web サイトを作成しているので、小さい/モバイル画面 (704px 以下) のレイアウトを処理する base.css ファイルと、デスクトップ/タブレット画面のレイアウトを処理する full.css ファイルをセットアップしました。 .
これは私がファイルをリンクする方法です
<link rel="stylesheet" href="css/base.css?v=1.67" media="screen, handheld">
<link rel="stylesheet" href="css/full.css?v=1.7" media="screen and (min-width:44em)">
(44em は 16px の「ベース」フォント サイズに基づいて 704px ですが、この問題のデバッグの一環として、代わりに絶対ピクセル値を使用し、大きな値を静かにして無駄にしました。問題について言えば...)
問題は、nexus 4 デバイスが full.css ファイルをダウンロードすることです。USBデバッグを使用してセットアップし、wiresharkを使用して確認したChromeインスペクターに表示されます。コンソールにいくつかの警告も出力されるため、full.css は確実に処理されています。
上記のように、大きなピクセル値 (1980px) を使用してみましたが、電話はまだファイルをダウンロードしています。本当に奇妙な部分は、レイアウトがfull.css が使用されているように見えないことです。実際、メディアクエリを削除して「適切に」ロードすると、レイアウトが台無しになります。したがって、基本的にサイトは正しく動作しますが、full.css をダウンロードするために帯域幅がまだ使用されています。サイトを可能な限り最適化したいので、これは理想的ではありません。
これは chrome for android の既知の問題ですか? 解決策はありますか (サーバーでブラウザー/解像度の検出を行う以外に)?