• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

O meta tagu viewport, rozdzielczości i pikselach

+1 głos
105 wizyt
pytanie zadane 6 dni temu w HTML i CSS przez Artek Obywatel (1,750 p.)

Temat powstał w celu szczegółowego zrozumienia zagadnień związanych z tagiem <meta name="viewport" content="width=device-width, initial-scale=1"> oraz rozdzielczością, pikselami itp. Nie jestem pewny czy ja to dobrze rozumiem, mam też parę pytań dlatego proszę mnie poprawić jeżeli coś napisałem niepoprawnie.

Na MDN napisano :

Mobile browsers render pages in a virtual "window" (the viewport), usually wider than the screen, so they don't need to squeeze every page layout into a tiny window (which would break many non-mobile-optimized sites). Users can pan and zoom to see different areas of the page

 Czyli zgodnie z powyższym strony renderowane w ten sposób powinny zazwyczaj "wystawać" za ekran i przeglądarka doda paski boczne tak aby móc przewijać wystającą zawartość.

Mamy też informację o tym, że 1 piksel CSS wcale nie musi być równy jednemu pikselowi na wyświetlaczu danego urządzenia.

A pixel is not a pixel

In recent years, screen resolutions have risen to the size that individual pixels are hard to distinguish with the human eye. For example, recent smartphones generally have a 5-inch screens with resolutions upwards of 1920—1080 pixels (~400 dpi). Because of this, many browsers can display their pages in a smaller physical size by translating multiple hardware pixels for each CSS "pixel

 Oraz informację o tym jak zamieniane są rzeczywiste piksele urządzenia na piksele css.

The default pixel ratio depends on the display density. On a display with density less than 200dpi, the ratio is 1.0. On displays with density between 200 and 300dpi, the ratio is 1.5. For displays with density over 300dpi, the ratio is the integer floor(density/150dpi).

 

Jednostka dpi(dots per inch/kropki na cal) w tym wypadku tak na dobrą sprawę odpowiada ppi czyli pixels per inch(piksele na cal). Po prostu potocznie się już tak przyjęło, że dpi to ppi.

Czyli np. gdybyśmi mieli dpi pomiędzy 200 a 300 to zgodnie z powyższym w takim wypadku np. na 150 fizycznych pikseli urządzenia przypadałoby 100 pikseli css. Zapis width: 100px w arkuszu stylów skutkowałby tym, że element zajmowałby 150 fizycznych pikseli urządzenia. Oczywiście sytuacja zmienia się gdy zrobimy zoom. Jeżeli np. zrobimy zoom in(przybliżenie) to na 1 piksel css będzie przypadać więcej fizycznych pikseli urządzenia. 

Teraz skupmy się na naszym meta tagu.

"<meta name="viewport" content="width=device-width, initial-scale=1">
The width property controls the size of the viewport. It can be set to a specific number of pixels like width=600 or to the special value device-width, which is the width of the screen in CSS pixels at a scale of 100%."

 

Ten tag pozwala ustawić szerokość tego jak to nazwano wcześniej "wirtualnego okna". Jeżeli podam np. 600 to wirtualne okno będzie mierzyć 600 pikseli css. A co jeżeli podałbym wartość mniejszą niż rozmiar okna(wszystko oczywiście mierzone w pikselach css) np. podałbym 320px a szerokość urządzenia byłaby np 680? Czy wtedy na wyświetlaczu powstałyby puste dziury po bokach?

Jeżeli w tym tagu podam width=device-width to szerokość wirtualnego okna będzie dokładnie odpowiadać szerokości urządzenia. (Oczywiście wszystko mierzone jest w pikselach css). 

Czyli szerokość wirtualnego okna = liczba fizycznych pikseli na ekranie * współczynnik konwersji(wspomniane wcześniej "pixel ratio")

I jeszcze jedno na koniec. Po co w ogóle jakieś kombinacje z wystającym wirtualnym oknem i kombinowanie z jakimiś tagami, które nawet nie są częścią żadnego standardu sieciowego? Nie można było od razu zaprojektować mobilne przeglądarki tak aby zachowywały się jak nakazuje wspomniany wcześniej meta tag?

1 odpowiedź

+1 głos
odpowiedź 5 dni temu przez Comandeer Mentor (376,970 p.)

 Po co w ogóle jakieś kombinacje z wystającym wirtualnym oknem i kombinowanie z jakimiś tagami, które nawet nie są częścią żadnego standardu sieciowego?

. Na dobrą sprawę to jedyna interoperacyjna implementacja mechanizmu adaptacji viewportu (bo @viewport jest martwe).

Nie można było od razu zaprojektować mobilne przeglądarki tak aby zachowywały się jak nakazuje wspomniany wcześniej meta tag?

Nie można, bo czasami jest potrzebne inne zachowanie niż domyślne. Poza tym nie można było, bo tak zaprojektowana przeglądarka zepsułaby Sieć. Żeby RWD mogło powstać, najpierw musiały powstać przeglądarki to umożliwiające. A żeby mogły powstać w Sieci, która nie była responsywna, potrzebowano mechanizmu opt-in dla responsywności. I powstało, co powstało.

A co jeżeli podałbym wartość mniejszą niż rozmiar okna(wszystko oczywiście mierzone w pikselach css) np. podałbym 320px a szerokość urządzenia byłaby np 680? Czy wtedy na wyświetlaczu powstałyby puste dziury po bokach?

Najłatwiej to po prostu sprawdzić ;)

komentarz 5 dni temu przez Artek Obywatel (1,750 p.)

. Na dobrą sprawę to jedyna interoperacyjna implementacja mechanizmu adaptacji viewportu (bo @viewport jest martwe).

Mam na myśli to co napisali na MDN'ie czyli

 Mobile Safari introduced the "viewport meta tag" to let web developers control the viewport's size and scale. Many other mobile browsers now support this tag, although it is not part of any web standard. 

 https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag

Nie można, bo czasami jest potrzebne inne zachowanie niż domyślne. Poza tym nie można było, bo tak zaprojektowana przeglądarka zepsułaby Sieć. Żeby RWD mogło powstać, najpierw musiały powstać przeglądarki to umożliwiające. A żeby mogły powstać w Sieci, która nie była responsywna, potrzebowano mechanizmu opt-in dla responsywności. I powstało, co powstało.

 

Masz na myśli to, że przeglądarki nie obsługiwały media-queries dla poszczególnych szerokości ekranu? Czy coś jeszcze? Mógłbyś rozwinąć swoją wypowiedź?

Najłatwiej to po prostu sprawdzić ;)

Oczywiście zrobiłbym tak gdybym posiadał telefon z przeglądarką. Jak wiesz to się podziel :) 

komentarz 5 dni temu przez Comandeer Mentor (376,970 p.)

Mam na myśli to co napisali na MDN'ie czyli

Niemniej MDN zaznacza, że ten element występuje w specyfikacji. Jedyny minus jest taki, że jest to sekcja nienormatywna, a równocześnie – jedyna sekcja, która kiedykolwiek doczekała się implementacji (w sumie odwrotnie: to sekcja opisująca rzeczywistość).

Masz na myśli to, że przeglądarki nie obsługiwały media-queries dla poszczególnych szerokości ekranu? Czy coś jeszcze? Mógłbyś rozwinąć swoją wypowiedź?

Mam na myśli to, że ten znacznik powstał w czasach, gdy bardzo mało stron stosowało RWD i na dobrą sprawę dopiero po jego wprowadzeniu coś takiego jak RWD faktycznie zaistniało. Stąd też nie dało się przystosować przeglądarki do czegoś, co nie istniało.

Jak wiesz to się podziel :) 

Nie wiem, nigdy tego nie próbowałem. Ale na logikę powinno to zadziałać podobnie, jak wymuszenie zooma 50%. 

Podobne pytania

0 głosów
1 odpowiedź 103 wizyt
pytanie zadane 8 sierpnia w HTML i CSS przez rice Początkujący (300 p.)
0 głosów
1 odpowiedź 84 wizyt
pytanie zadane 26 czerwca 2016 w HTML i CSS przez CzlowiekSkrypt Nałogowiec (26,760 p.)
0 głosów
2 odpowiedzi 105 wizyt
pytanie zadane 1 stycznia 2016 w HTML i CSS przez chapcio Nowicjusz (200 p.)

42,445 zapytań

81,749 odpowiedzi

162,269 komentarzy

20,388 pasjonatów

Przeglądających: 111
Pasjonatów: 3 Gości: 108

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...