[RWD] projektowanie pod różne rozdzielczości
Izabela Grabowska
1/12/2017 | 8:15 PM

Witam, od jakiegoś czasu próbuję opanować temat projektowania pod różne rozdzielczości. Po opublikowaniu projektu ( sam układ div-ów) strona poprawnie reaguje na zmianę wielkości okna przeglądarki, natomiast telefon - iphone se, który powinien mieć rozdzielczość 1136x640 w układzie pionowym wyświetla układ przeznaczony dla rozdzielczości poniżej 481px. Co może być tego przyczyną?

Piotr Palarz
1/13/2017 | 2:39 PM

Jest to zachowanie absolutnie normalne. Rozdzielczość iPhone'a to faktycznie 640x1136 ale liczy się tutaj jeszcze gęstość pixeli (ratio), która wynosi 2. A to oznacza, że przy kodowaniu mobilnego layoutu, musi Pani podzielić podaną rozdzielczość przez 2, a zatem breakpointy w media queries będą takie: 320x568. Przydatna może być ta tabela: http://mydevice.io/devices/ (proszę zwrócić uwagę na koliumnę pixel ratio). Dodatkowo polecam w przeglądarce Chrome przejść pod F12 do narzędzi deweloperskich i po lewej stronie wybrać ikonkę urządzeń mobilnych. Pojawi się odpowiedni panel, gdzie można wybrać z presetów np. iPhone 5 i okienko zostanie zeskalowane do odpowiedniej szerokości i wysokości.

Izabela Grabowska
1/13/2017 | 3:43 PM

Dziękuję bardzo, wszystko jasne :)