Risoluzione mobile effettiva

Question

Sono nuovo di HTML5 & CSS3 quindi sto lavorando a un progetto semplice per imparare meglio. Recentemente ho scoperto il responsive design, quindi sto creando una pagina che si adatta al mio telefono. Usando le media query, ho creato due stati, uno per gli schermi 640px (mobile) e più piccolo e uno per lo schermo 641px e più grande (desktop). Il sito funziona bene, mostrando gli stili corretti sul mio desktop quando scala la finestra e mostro lo stile corretto quando lo visualizzo sul mio telefono.

Tuttavia, dopo aver eseguito il sito, ho deciso di verificare la risoluzione del mio HTC One - è 1080p. Il mio telefono visualizza il sito 640px indipendentemente dall'orientamento. Mi chiedo perché questo accade; la risoluzione più alta del telefono non dovrebbe attivare lo stato mobile, ma lo fa. Sto pensando che potrei essere confuso su come le risoluzioni funzionano davvero.

Quindi, come determinare la vera risoluzione dei telefoni (e dei tablet) in modo da poter creare siti opportunamente scalati?

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

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

Modifica Grazie a JoshCs commento qui sotto, ho capito che avevo la finestra meta tag in uso da un tutorial. Vorrei rivedere la mia domanda per chiederlo: in che modo il tag viewport determina quale risoluzione visualizzare per un determinato dispositivo (come faccio a determinare la risoluzione visualizzata in base alle dimensioni di un dispositivo)?

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

Answer 1

Un pixel CSS è un concetto astratto indipendente dai pixel effettivi sullo schermo. In particolare, è un pixel indipendente dalla densità. A seconda della densità fisica dei pixel dei dispositivi, un pixel CSS logico scala in termini di dimensioni rispetto ai pixel fisici. Ad esempio, in molti dispositivi, una larghezza dello schermo di 640 ha il rapporto pixel CSS di 2. Quindi due pixel vengono utilizzati per disegnare un singolo pixel CSS.

Quando si utilizza il metatag viewport, si indica al browser di ridimensionare il pixel CSS utilizzando il rapporto pixel.

È possibile determinare la frazione di pixel del dispositivo nei browser Webkit utilizzando window.devicePixelRatio. Quella coppia con il numero di pixel fisici può essere utilizzata per determinare la risoluzione della vista.

---

Riferimenti

• 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

Questo è come l'ho impostato:

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

È possibile utilizzare jQuery per cambiare base di porta in mostra dimensioni:

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

Spero che questo aiuti :)