7

私は HTML5 と CSS3 を初めて使用するので、それをよりよく学ぶために簡単なプロジェクトに取り組んでいます。最近、レスポンシブ デザインを発見したので、携帯電話に合わせたページを作成しています。私はメディア クエリを使用して、2 つの状態を作成しました。サイトは正常に動作し、ウィンドウを拡大するとデスクトップに正しいスタイルが表示され、電話で表示すると正しいスタイルが表示されます。

しかし、サイトを実行した後、HTC One の解像度を確認することにしました - 1080p です。私の電話は、向きに関係なく 640px のサイトを表示します。なぜこれが起こるのか疑問に思っています。携帯電話の解像度が高いからといって、モバイル状態がトリガーされることはありませんが、トリガーされます。解決策が実際にどのように機能するかについて混乱する可能性があると思います。

では、適切にスケーリングされたサイトを作成できるように、電話 (およびタブレット) の実際の解像度を決定するにはどうすればよいでしょうか?

//Mobile
@media screen and (max-width: 640px) {
    ...
}

//Desktop
@media screen and (min-width: 641px) {
    ...
}

編集 以下の JoshCs コメントのおかげで、チュートリアルからビューポート メタ タグが使用されていることに気付きました。質問を修正したいと思います: ビューポート タグは、特定のデバイスに表示する解像度をどのように決定しますか (デバイスの寸法に基づいてビューポートの解像度を決定するにはどうすればよいですか)?

<meta name="viewport" content="width=device-width; initial-scale=1.0">
4

2 に答える 2

6

CSS ピクセルは、画面上の実際のピクセルから独立した抽象的な概念です。具体的には、密度に依存しないピクセルです。デバイスの物理ピクセル密度に応じて、論理 CSS ピクセルのサイズは物理ピクセルに比例します。たとえば、多くのデバイスでは、画面幅が 640 の場合、CSS ピクセルの比率は 2 になります。したがって、1 つの CSS ピクセルを描画するために 2 つのピクセルが使用されます。

ビューポート メタタグを使用すると、ピクセル比率を使用して CSS ピクセルをスケーリングするようにブラウザーに指示します。

window.devicePixelRatio を使用して、Webkit ブラウザーでデバイスのピクセル比率を決定できます。これを物理的なピクセル数と組み合わせて、ビューポートの解像度を決定することができます。

参考文献

于 2013-09-30T04:11:12.893 に答える