Portrait view - dlaczego taka wartość?

0

Cześć, jestem początkującym więc jeśli pytanie jest banalne wybaczcie.

Jestem w trakcie tworzenia responsywnego layoutu strony przy użyciu media queries. Dla portrait view tabletowego, breakpointy ustawiam na 768 i 1024px (standardowe ustawienie Wordpress). Rozumiem to tak, że jeśli urządzenie ma szerokość ekranu w tych widełkach, użytkownikowi wyświetli się konkretny layout strony. Natomiast jak to się ma do realnych rozdzielczości tabletów, które wynoszą 1536x2048, 1620x2160 itp? Czy tutaj w grę wchodzi jakiś dodatkowy przelicznik lub współczynnik?
Z góry bardzo dziękuję za odpowiedź.

1

Tablety, głównie iPady korzystają ze skalowania, więc np. 2 fizyczne pixele wyświetlają 1 logiczny pixel. Więc zgłaszają się jako 2x mniejsze, ale dzięki temu obraz jest ostrzejszy. Tzn właściwie 4 fizyczne pixele wyświetlają 1, tzn fizyczne 2x2 to 1x1 zgłaszane
Tak samo jest jak na desktopie włączysz skalowanie np. 150, albo 200%

3

Tablety czy telefony (zresztą - pewnie inne urządzenia także) nie mają ściśle przelicznika 1:1 jeśli chodzi o stosunek fizycznych pikseli do logicznych (czyli tego, co widzi aplikacja/system). Pamiętam, jak sam miałem jakiś czas temu dość konkretny WTF z tym związany - chyba odkryłem to przy okazji pisania aplikacji na Androida. Zgodnie ze specyfikacją, ekran urządzenia powinien mieć powiedzmy 1200 px, a mi się wykrywał jako 600 (dane z tyłka - chodzi o zasadę). Po prostu - teraz jak masz rozdzielczości rzędu 2k na 6" ekranie, to pojedynczy piksel jest praktycznie niewidoczny - więc się je skaluje i jak programowo zapalasz jeden punkcik, to na ekranie fizycznie odpalanych jest kilka pikseli.

Ale tak w sumie - zastanawiam się, po co Tobie ta wiedza? W sensie - liczy się efekt końcowy, czyli to, jak ekran jest identyfiokwany/jaką rozdzielczość podaje system. I Ciebie raczej nie powinno obchodzić, czy masz 800px szerokości, bo tak fizycznie jest stworzony ekran, czy może ekran ma 1600px, ale jest włączone skalowanie i jeden logiczny piksel to są fizycznie dwa punkty.

0

Jeżeli z jakichś przyczyn potrzebowałbyś się do tego dostać to w JS masz window.devicePixelRatio
https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio
poza tym masz w media queries coś takiego jak resolution (gęstość pikseli w dpi)
https://developer.mozilla.org/en-US/docs/Web/CSS/@media/resolution
i jeszcze inne, ale te inne są z tego co widzę niestandardowe

0

Dzięki za wyczerpujące odpowiedzi.
@cerrato: po prostu chciałem nabyć nieco teoretycznej wiedzy na ten temat :).

1 użytkowników online, w tym zalogowanych: 0, gości: 1