2

画面サイズに基づいてさまざまなスケールを提供するために、メディア クエリを使用しています。しかし、画面サイズは CSS に正しい数値を示していません。Nexus 4 では、ディスプレイは私の「480px」CSS スタイルを使用し、Javascript では次のように表示されます。

//Javascript shows these:
window.innerHeight == 519
window.innerWidth == 384

//CSS uses this rule:
@media screen and (orientation:portrait) and (min-width: 361px) {...}

電話のブラウザーのスクリーンショットは、表示されているウィンドウを768 x 1038として示しています。これは、私が表示している高さと幅のちょうど 2 倍です。

CSS と JavaScript で実際の解像度を使用する方法はありますか? 解像度に応じてさまざまな画像サイズを提供して、画面解像度に適した最高解像度の画像を取得したいと考えています。

たとえば、メイン画像の 768 x 400 バージョンがあります。これを、取得している 480 x 250 の縮小画像ではなく、Nexus 4 に提供したいと考えています。どうすればいいですか？

4

1 に答える 1

3

モバイル ブラウザは、必要な画面サイズを報告します。ブラウザの「ピクセル」は必ずしも実際のピクセルではありません。

私の HTC One X には 1280x720 の画面があり、640x360 と報告されています。

最も抵抗の少ない方法は、ハードウェア メーカーに任せることです。ときどき間違ってしまうこともありますが (iPad Mini)、一般的にはそれが最も簡単で最善の方法です。レポートされたピクセルごとに複数の実際のピクセルを使用することで、テキストを非常にうまくレンダリングできます。したがって、「標準」の 16 ピクセルのフォント サイズは、実際に 32 ピクセルのテキストのように描画されている場合、小さな画面では見栄えがよくなります。

(いいえ、ブラウザに別のことを強制することはできません。)

于 2013-04-10T23:12:49.173 に答える