Rzeczywiste rozwiązanie mobilne

Question

Jestem nowy w HTML5 & CSS3, więc pracuję nad prostym projektem, aby go lepiej poznać. Ostatnio odkryłem responsywny design, więc tworzę stronę, która dostosowuje się do mojego telefonu. Korzystając z zapytań o media, utworzyłem dwa stany, jeden dla ekranów 640px (mobilny) i mniejszy oraz jeden dla ekranu 641px i większy (desktop). Witryna działa dobrze, pokazując poprawne style na moim pulpicie, gdy skaluję okno i pokazuję właściwy styl, gdy przeglądam go na moim telefonie.

Po uruchomieniu strony postanowiłem sprawdzić rozdzielczość mojego HTC One - to 1080p. Mój telefon wyświetla witrynę o wielkości 640 pikseli niezależnie od orientacji. Zastanawiam się, dlaczego tak się dzieje; wyższa rozdzielczość telefonu nie powinna wywoływać stanu mobilnego, ale tak się dzieje. Myślę, że mogę być zdezorientowany, w jaki sposób rozwiązania faktycznie działają.

Jak określić rzeczywistą rozdzielczość telefonów (i tabletów), aby umożliwić im tworzenie odpowiednio skalowanych witryn?

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

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

Edit Dzięki JoshCs komentarzu poniżej, zdałem sobie sprawę, że miałem meta tag rzutni w użyciu od samouczka. Chciałbym skorygować moje pytanie, aby zapytać: w jaki sposób znacznik rzutni określa rozdzielczość dla dowolnego urządzenia (w jaki sposób określić rozdzielczość wyświetlania na podstawie wymiarów urządzenia)?

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

Answer 1

Piksel CSS to abstrakcyjna koncepcja niezależna od rzeczywistych pikseli na ekranie. W szczególności jest to piksel niezależny od gęstości. W zależności od fizycznej gęstości pikseli urządzenia, logiczny piksel CSS skaluje się względem fizycznych pikseli. Na przykład w wielu urządzeniach szerokość ekranu wynosząca 640 ma stosunek pikseli CSS wynoszący 2. Tak więc dwa piksele są używane do narysowania pojedynczego piksela CSS.

Podczas korzystania z metatagu rzutni zaleca się przeglądarce skalowanie piksela CSS przy użyciu współczynnika pikseli.

Możesz określić rytm piksela urządzenia w przeglądarkach webkit przy użyciu window.devicePixelRatio. Ta para z fizyczną liczbą pikseli może być użyta do określenia rozdzielczości rzutni.

---

Odniesienia

• 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

To jak mam go skonfigurować:

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

Można użyć jQuery zmienić port bazę wielkości Widok:

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

Mam nadzieję, że to pomoże :)