Aktuelle mobile Auflösung

Question

Ich bin neu in HTML5 & CSS3, also arbeite ich an einem einfachen Projekt, um es besser zu lernen. Ich habe kürzlich Responsive Design entdeckt, also erstelle ich eine Seite, die auf mein Handy skaliert. Ich benutze Medienabfragen, ich habe zwei Zustände erstellt, einen für Bildschirme 640px (mobil) und kleiner und einen für Bildschirm 641px und größer (Desktop). Die Website funktioniert einwandfrei und zeigt die richtigen Stile auf meinem Desktop an, wenn ich das Fenster skaliere und den richtigen Stil zeige, wenn ich es auf meinem Telefon ansehe.

Allerdings, nach dem Ausführen der Website, habe ich beschlossen, die Auflösung meines HTC One zu überprüfen - es ist 1080p. Mein Telefon zeigt die 640px-Site unabhängig von der Ausrichtung an. Ich frage mich, warum das passiert; Die höhere Auflösung des Telefons sollte den Mobilstatus nicht auslösen, tut es aber. Ich denke, ich könnte verwirrt sein, wie Auflösungen tatsächlich funktionieren.

Also, wie kann ich die wahre Auflösung von Telefonen (und Tablets) bestimmen, so dass ich entsprechend skalierte Websites für sie erstellen kann?

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

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

bearbeiten Dank JoshCs Kommentar unten, wurde mir klar, dass ich den Ansichtsfenster-Meta-Tag im Einsatz von einem Tutorial hatte. Ich möchte meine zu überprüfende Frage überarbeiten: Wie bestimmt das Viewport-Tag, welche Auflösung für ein bestimmtes Gerät angezeigt werden soll (wie ermittle ich die angezeigte Auflösung basierend auf den Abmessungen eines Geräts)?

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

Answer 1

Ein CSS-Pixel ist ein abstraktes Konzept, das unabhängig von tatsächlichen Pixeln auf dem Bildschirm ist. Insbesondere ist es ein dichteunabhängiges Pixel. Abhängig von der physischen Pixeldichte der Geräte wird ein logischer CSS-Pixel relativ zu physischen Pixeln skaliert. Zum Beispiel hat eine Bildschirmbreite von 640 in vielen Geräten das CSS-Pixelverhältnis von 2. So werden zwei Pixel verwendet, um ein einzelnes CSS-Pixel zu zeichnen.

Wenn Sie das Metatag im Ansichtsfenster verwenden, weisen Sie den Browser an, das CSS-Pixel mithilfe des Pixelverhältnisses zu skalieren.

Sie können das Pixelverhältnis des Geräts in Webkit-Browsern mithilfe von window.devicePixelRatio ermitteln. Dieses Paar mit der physikalischen Pixelzählung kann verwendet werden, um die Ansichtsfensterauflösung zu bestimmen.

---

Referenzen

• 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

Dies ist, wie ich es eingerichtet haben:

<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) {} 

Sie können jquery verwenden Basishafen auf Ansicht Größe zu ändern:

// 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'); 
} 

Hoffe, das hilft :)