9

サイズの異なるデバイス用に異なるテンプレートをロードするために、CSS メディア クエリを使用しています。テスト デバイスのディスプレイ解像度と最も一般的なデバイスのサイズ カットオフを示すスプレッドシートを作成しました。私がテストしているデバイスの 1 つは Nexus 7 で、そのディスプレイ解像度は 1280 × 800 であることがわかりました。ただし、コードでこれらの値を使用すると機能しません。

**最大値または最小値を使用しない唯一の理由は、正確な解像度を見つけようとしているからです。max-device-width をかなり大きいものに置き換えると機能し、さまざまな最大値で機能することを確認するのに十分なテストを行いましたが、コードを適切に完成させて、サイズの異なる 3 つのデバイス カテゴリを区別する必要があります。 、正しいカットオフを作成していることを確認する必要があります。CSSの解像度が違う？事前にすべての助けをありがとう！

@media only screen and (device-width:1280px) and (orientation:landscape) {
/*style --code removed for sack of space */
} 

@media only screen and (device-width:800px) and (orientation:portrait) {

/*style --code removed for sack of space */

}

これが私のhtmlファイルのビューポートコードです

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

3 に答える 3

13

CSS ピクセルとデバイス ピクセルの画面サイズには違いがあります。

nexus 7 の場合、ネイティブ デバイスのピクセルは 1280 x 800 ピクセルです。

ただし、これがメディア クエリの報告された幅である場合、レスポンシブ デザインが従来のデスクトップ サイズでトリガーされることになります。

その結果、多くのブラウザーは、高ピクセル密度のディスプレイが表示される前の従来のピクセルのサイズにより近い CSS ピクセル サイズに落ち着いています。かなりのiPhone 1 - 3ピクセルサイズ。

device-pixel-ratio レポート (デバイス ピクセル / CSS ピクセル)

例: 800 / 600 = 1.3333

さらに混乱を招くのは、これらの比率が OS のリリースによって異なる場合があることです。たとえば、Jelly Bean 4.2 の時点で、私の nexus 7 は縦方向の幅が 603 から 600 ピクセルになったと報告しています。

これにより、幅ベースのメディア クエリで正確なデバイスをターゲットにすることが困難になります。膨大な数のデバイス幅に合わせて設計していることを受け入れ、サポートすることを選択したデバイス サイズの範囲に適応するレスポンシブ デザインを作成することをお勧めします。

頑張ってください:)

于 2012-11-16T01:23:25.423 に答える
3

次のビューポート コードを使用します。

<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width" />

またはスケーリングを許可しない場合は次のようになります。

<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1, maximum-scale=1,user-scalable=no" />

1280/800Nexus 7 の奇妙な点は、(jpgr が投稿したように) 自慢のスペースを (少なくとも箱から出して)使用できないことです。スケーリングの環境設定が設定されているにもかかわらず、ある程度ズームインされているように見えます。

この問題は、グラフィックが少しぼやけて見えるときに気付きます。javascript を使用してウィンドウ サイズをテストしたところ25%、予想よりも低い数値が投稿されていました。ほとんどの場合、スケーリング パラメータを無視しているように見えるため、スケーリング パラメータを除外していることに気付くでしょう。

本当の鍵は、を使用することtarget-densitydpi = device-dpiです...これは、雨のように非常に適しているようです。

確かにNexus 7で作業するのが大好き!!!

于 2012-09-05T00:10:57.807 に答える
2

あまりにも実用的な回答ですが、基本的に 601x880 の画面サイズを使用して Nexus 7 をターゲットにすることができます。技術的には完全ではありませんが、メディア クエリでブレークポイントを使用しようとしている場合は、開始するには十分なはずです。

于 2013-01-16T23:20:20.043 に答える