実際の携帯電話の解像度

Question

私はHTML5の新しいです& CSS3だから私はそれをより良く学ぶために簡単なプロジェクトに取り組んでいます。私は最近、レスポンシブデザインを発見したので、私の電話に合わせてページを作成しています。私はメディアクエリを使用して、640px（モバイル）の画面と641px以上のデスクトップ（画面）の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"> 

Answer 1

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

ビューポートメタタグを使用すると、ピクセル比率を使用してCSSピクセルを拡大/縮小するようブラウザに指示します。

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

---

参照

• How can you get the CSS pixel/device pixel ratio?
• http://www.quirksmode.org/blog/archives/2012/07/more_about_devi.html
• What is Device Pixel Ratio for?
• what exactly is device pixel ratio?
http://en.wikipedia.org/wiki/List_of_displays_by_pixel_density
• http://gamon.org/blog/2013/04/26/css-pixel-ratios-or-why-all-mobile-sites-are-320-pixels/

Answer 2

これは私がそれを設定している方法です。

<meta name="viewport" content="width=device-width"> 

CSS：

/********** Desktop - 920px breakpoint ***************************/ 
@media screen and (max-width: 60em) {} 

/*iPAD SUPPORT=====================================--*/ 
@media (max-width: 56.250em) {} 

/*NEXUS SUPPORT=====================================--*/ 
@media (max-width: 44.063em) {} 

/*iPhone SUPPORT=====================================--*/ 
@media screen and (max-width: 22.500em) {} 

あなたはビューのサイズにポートベースを変更するためにjqueryのを使用することができます。

// Check for device screen size 
if($.mobile.media("screen and (max-device-width: 640px)")) { 
    // Change viewport for smaller devices 
    $('meta[name=viewport]').attr('content','width=device-width, initial-scale=1'); 
} 

ほしいと思っています。