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?
