なぜCSSのメディアクエリが私の電話に一致しないのですか

画面の幅に応じて異なる背景画像を読み込むメディアクエリがたくさんあります。何らかの理由で、私のOne plus 2（画面の幅が1080のポートレート）が（max-width：400px）節をトリガーしています。どうして？なぜCSSのメディアクエリが私の電話に一致しないのですか

私はそれがピクセル密度と関係していると考えます。この場合、ピクセル密度を考慮すると、最も一般的な画面サイズのリストがありますか？

@media screen and (max-width: 1080px) { 
    .mainImage { 
    background-image: url('shop-home-vertical-1080.jpg'); 
    } 
} 

@media screen and (max-width: 800px) { 
    .mainImage { 
    background-image: url('shop-home-vertical-800.jpg'); 
    } 
} 

@media screen and (max-width: 600px) { 
    .mainImage { 
    background-image: url('shop-home-vertical-600.jpg'); 
    } 
} 

@media screen and (max-width: 400px) { 
    .mainImage { 
    background-image: url('shop-home-vertical-400.jpg'); 
    } 
}

編集：私は持っている

ビューポートは、次のとおりです。画面上の要素の全幅を検査するデベロッパーツールを使用して

<meta name="viewport" content="width=device-width, initial-scale=1" />

。画面の幅は360ピクセルと思われます。正確に1080/3です。

出典

2016-06-30 SystemicPlural

ページからメタビューポートタグが欠けていますか？ https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag – Esko

あなたは、 'を' 'セクション？ – moped

@mopedビューポートが存在します。編集 – SystemicPlural

これは実際のデバイス比率を下げるデバイスピクセル比率によって発生します。

Here is a list of phonesと、メディアクエリで使用される実際の表示解像度。 1プラス2（1：3の比率）を含んでいません

次の例では、1と2を正確にターゲットに設定できます。

@media screen and (max-width: 360px) and (orientation: portrait) and (min-resolution: 3dppx) { 
    .mainImage { 
    background-image: url('shop-home-vertical-1080.jpg'); 
    } 
}

私はそれを理解しています。ほとんどの場合、私はこれを行うべきではありません。しかし、この場合、それを利用できるスクリーン用により高い解像度の画像をダウンロードすることができます。

dppxがまだ十分にサポートされていないことが判明しました。これはサファリでは機能しません。

出典

2016-06-30 11:50:33 SystemicPlural

ビューポートを設定するのが忘れてしまうようです。これを頭に入れてみてください<head> <meta name="viewport", content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">

出典

2016-06-30 09:44:30

質問に現在のビューポートを追加しました。私はあなたのものに変えようとしましたが、それはユーザーがズームするのを防ぐことです。 – SystemicPlural

なぜCSSのメディアクエリが私の電話に一致しないのですか

答えて

関連する問題