Responsywność - funkcja "ZBADAJ" w przeglądarce. Czy wpisać ilość pixeli w telefonie czy jakos to przeliczyc?

Question

Witam,
Od niedawna ćwiczę responsywność stron za pomocą media queries i efekt sprawdzam za pomocą narzedzia "ZBADAJ" w przeglądarce. Można tam ustawić podgląd responsywny. Jednak zastanawia mnie jedna rzecz.

Domyślnie jest tam wpisane np. Galaxy S5 i podane są parametry 360 x 640.

Ten telefon ma podaną rozdzielczość wyswietlacza 1080 x 1920 px na stronie internetowej.

Jakbym chciała wprowadzić np. podglad dla swojego telefonu , który ma rozdzielczość 720 x 1280 px  to co mam wpisac w narzedziu przeglądarki "ZBADAJ"?
Oczywiście wpisałam najpierw własnie te wartości ale zorientowałam się, ze coś jest nie tak i skoro dla GALAXY S5 jest pomniejszone to nie można chyba tego o tak przepisac. Zresztą za duże jakies się to wydaje.

 

Czy jest na to jakas zasada jak się tam podaje te pixele w tym narzędziu?
Bardzo proszę o pomoc.

Answer 1

Oblicza się to na podstawie wielkości wyświetlacza :) A dokładnie na podstawie pikseli na cal. Możesz zweryfikować tą wielkość wykonując prosty skrypt w swoim telefonie (lub w odpowiednim trybie przeglądarki). 

console.log(window.devicePixelRatio);

Dla Galaxy S5 devicePixelRatio wynosi 3. Dlatego też jeśli pomnożysz przez 3 parametry 360 x 640 otrzymasz prawdziwą rozdzielczość 1080 x 1920 px

Odwoływanie się do tej zmniejszonej rozdzielczości umożliwia nam ustawienie HTMLa: 

<meta name="viewport" content="width=device-width, initial-scale=1">

Polecam sprawdzać każdą szerokość zmniejszając i zwiększając przestrzeń strony. Aby nie zamykać się tylko na kilka urządzeń.