<p>Współczesne strony internetowe muszą odpowiednio wyświetlać się na różnych urządzeniach mobilnych, od tabletów po smartfony. Aby osiągnąć taki efekt, powinniśmy zamieścić na naszej stronie meta tag <code>viewport</code>, który będzie informował silniki przeglądarek mobilnych o tym jak poprawnie wyświetlać treść. &nbsp;Bez tej informacji, teksty i elementy interfejsu na urządzeniach mobilnych będą dla użytkownika zbyt małe, co znacznie utrudni mu korzystanie z naszej strony.</p><h2>Czym właściwie jest viewport?&nbsp;</h2><p>W kontekście tworzenia stron internetowych <code>viewport</code> odnosi się do obszaru na ekranie przeglądarki internetowej, w którym wyświetlane są treści. Przestrzeń ta nie jest tożsama z rozmiarem strony, ponieważ <code>viewport</code> nie uwzględnia scrollbarów, które dodaje domyślnie przeglądarka, gdy treść przekracza rozmiar viewportu.</p><p>W artykule jako przykład będzie nam służył iPhone 12 Pro, którego viewport wynosi <code>390px × 844px</code>. Oznacza to, że jeśli dodamy na stronie element, którego szerokość będzie wynosiła <code>500px</code>, to strona nam się rozjedzie i treść wyjdzie poza obszar viewportu.</p><p style="text-align:center;"><img class="image_resized" style="aspect-ratio:680/698;width:40.5%;" src="https://api.folticode.pl/uploads/viewport_d6fef81302.svg" alt="viewport.svg" width="680" height="698"></p><h2>Rozmiar viewportu a rozdzielczość ekranu</h2><p>W tym momencie może pojawić się pytanie: jeżeli rozdzielczość iPhona 12 Pro to <code>1170px × 2532px</code>, to dlaczego rozmiar viewportu nie jest taki sam?&nbsp;</p><p>Problem wynika stąd, &nbsp;że nowe smartfony coraz częściej posiadają wysokie rozdzielczości (nawet do 1920px × 1080px), co sprawia, że na małym ekranie smartfona jest duże zagęszczenie pikseli. To z kolei będzie powodować, że elementy strony w przeglądarce będą zbyt małe. Z pomocą przychodzi <code>CSS pixel ratio</code>, który określa stosunek między liczbą pikseli na ekranie urządzenia (piksele fizyczne) a liczbą pikseli CSS (piksele logiczne), które są zdefiniowane przez przeglądarkę. Innymi słowy, jeżeli <code>pixel ratio</code> wynosi 3, to oznacza to, że jednemu pikselowi CSS odpowiadają trzy piksele fizyczne na ekranie urządzenia. W praktyce znaczy to tyle, że jeżeli mamy element z szerokością <code>100px</code>, to na ekranie urządzenia zajmie on rzeczywistą przestrzeń <code>300px</code>.&nbsp;</p><p>W przypadku iPhona 12 Pro <code>pixel ratio</code> wynosi <code>3</code>, co oznacza, że ekran o wymiarach <code>1170px × 2532px</code> zostanie przeskalowany do viewportu o wymiarach <code>390px × 844px</code>:</p><pre><code class="language-typescript">1170 / 3 = 390
2532 / 3 = 844</code></pre><p>W rezultacie rozmiar tekstu i elementów UI będzie zbliżony do tych na urządzeniach o mniejszych rozdzielczościach, ale będą one bardziej szczegółowe i wyraziste, z powodu większego zagęszczenia pikseli.&nbsp;</p><h2>Jak przeglądarki mobilne wyświetlają strony?</h2><p>Przeglądarki mobilne używają do renderowania stron <code>virtual viewport</code>, który zazwyczaj przyjmuje szerokość <code>980px</code>. Jak to działa w praktyce? Najpierw przeglądarka wyrenderuje stronę na szerokości <code>980px</code>, a potem <strong>skurczy ją</strong> w taki sposób, aby dopasowała się do szerokości viewportu (<code>380px</code> w naszym przypadku). Efekt będzie taki, że tekst i elementy UI będą bardzo małe. Oczywiście będzie to wyglądać źle, ale dzięki temu mamy zapewnioną chociaż minimalną skalowalność interfejsu.&nbsp;</p><p>Nie jest to oczywiście wystarczające rozwiązanie. Aby strona była w pełni responsywna, musimy skorzystać ze wspomnianego znacznika meta, który umieszczamy w sekcji <code>head</code> dokumentu HTML.</p><pre><code class="language-html">&lt;meta name="viewport" content="width=device-width, initial-scale=1" /&gt;</code></pre><p>Atrybut <code>content</code> może przyjmować dodatkowe parametry, ale nas interesują tutaj dwa podstawowe:</p><ul><li><code>width=device-width</code> - ustawienie szerokości viewportu na 100% szerokości viewportu urządzenia</li><li><code>initial-scale=1</code> - początkowa wartość powiększenia strony, gdzie wartość <code>1</code> gwarantuje optymalne powiększenie</li></ul><p>Tak będzie wyglądał efekt z zastosowaniem meta tagu <code>viewport</code>:</p><p style="text-align:center;"><img class="image_resized" style="aspect-ratio:1007/698;width:56.64%;" src="https://api.folticode.pl/uploads/roznice_viewport_0915c11836.svg" alt="roznice viewport.svg" width="1007" height="698"></p><p>Tekst i grafiki są teraz odpowiednio dostosowane pod względem rozmiaru do ekranu urządzania mobilnego, dzięki czemu użytkownik nie musi ich ręcznie powiększać.</p><h2>Podsumowanie</h2><p>Smartfony i tablety pomimo swoich małym rozmiarów są wyposażone w coraz to większe rozdzielczości ekranów. Zastosowanie znacznika <code>meta viewport</code> w połączeniu ze skalowaniem <code>pixel ratio</code> sprawia, że możemy widzieć na ekranach urządzeń mobilnych treści w odpowiednim rozmiarze dla naszego oka. Stosowanie tego rozwiązania jest absolutnym standardem w tworzeniu współczesnych stron internetowych, i myślę, że warto zapoznać się z jego działaniem.</p>

Blog - kategoria mobile

Dlaczego potrzebujemy na stronie meta tagu viewport?