Viewport to znacznik niezbędny do prawidłowego wyświetlenia strony HTML

Viewport – to jest ekran, który faktycznie widzi użytkownik. Prosty opis tego parametru mierzy się wielkością przekątnej. W praktyce opis widocznego obszaru strony monitora to zbiór parametrów, w tym przekątna, proporcje i liczba pikseli na jednostkę powierzchni.

Viewport HTML – jak pojawiło się nowe zadanie dla ekranu adaptacyjnego

Wiadomo, że małe smartfony mają najmniejszą przekątną, a duże monitory największą. Jednak obecną erę poprzedził czas mniej rozwiniętej technologii, więc różnorodność gadżetów była mniejsza. Parametry ekranu nie różniły się znacząco i nie było konieczności wpisywania nowego parametru w nagłówku strony. Stan techniki pozwolił na stosowanie zarówno oznaczeń elastycznych, jak i stałych. Tak naprawdę, jaką różnicę robi to, że strony są nadal przeglądane w mniej więcej takich samych warunkach?

Ale stworzenie urządzenia mobilnego wniosło nowość w tej kwestii. Gadżet ma już szeroki wachlarz parametrów, w tym rozdzielczość pikseli. Tym samym obszar widoczności ekranu stał się bardziej zmienny, co stanowiło wyzwanie dla programistów w zakresie dostosowania strony serwisu do urządzenia. HTML rzutni został stworzony później. Początkowo problem został rozwiązany poprzez wprowadzenie zmian w pliku projektu witryny.

CSS3 – Obecnie prawie wszystkie urządzenia obsługują tę specyfikację. Ale ma też wady. Ze względu na różnorodność rozdzielczości ekranów, responsywność należy tworzyć dla każdego parametru osobno. Dwa smartfony mogą mieć identyczną przekątną, ale liczba punktów na jednostkę powierzchni może różnić się dwukrotnie. Właśnie taką różnicę można zaobserwować pomiędzy produktami Apple.

Modele smartfonów tego samego producenta różnią się liczbą punktów na ekranie dwukrotnie. Niedokładne określenie rozmiarów czcionek i konturów bloków skutkowało niewygodnym przewijaniem w poziomie. Spowodowało to duży dyskomfort internautów.

Meta Viewport to narzędzie, które uwzględnia mankamenty pliku projektu CSS3. Przewijanie w pionie jest uważane za naturalne dla każdej strony. Przewijanie w poziomie powoduje niedogodności. Tekst jest trudny do odczytania, jeśli trzeba go ciągle przesuwać na boki. Wada ta powstaje właśnie na skutek niedokładności określenia szerokości strony. Użytkownik może ustawić ekran poziomo.

Parametr dodawany jest w nagłówku strony HTML. Przykład określa dwa parametry: nazwę tagu i szerokość. Meta Tag Viewport - ta linia pozwala ustawić dokładną szerokość ekranu. Dzięki temu blok tekstowy całkowicie pokrywa szerokość ekranu.

Viewport device-width Jak dostosować stronę internetową do ekranu smartfona, biorąc pod uwagę czcionkę

Poniżej prosty przykład linii, która uratuje sytuację. Opcje tagów mają o wiele więcej opcji, ale tak wygląda prosta pisownia.

Viewport width Parametr informuje przeglądarkę dokładnie, jak ma przetwarzać stronę. W powyższych przykładach mogliśmy zauważyć różnicę w określeniu szerokości ekranu.

Pierwszy przykład ustawia stałą szerokość ekranu monitora. Może to być dodatnia liczba całkowita z zakresu od 200 do 1000 punktów. Drugi przykład dostosowuje zawartość strony do różnych ekranów.

Viewport height Pierwsza linia określa wysokość ekranu, liczbę całkowitą od 233 do 1000 pikseli.

Opcje powiększania strony

Lista parametrów wskazuje główne metody skalowania. Ważna uwaga - w praktyce zaleca się stosowanie tylko pierwszego parametru, gdyż reszta utrudni użytkownikowi przeglądanie strony i zmniejszy dostępność treści.

• initial-scale – pierwotna skala jest wyświetlana jako liczba od 0,1 do 1,0. Drugi przypadek zabrania skalowania zawartości strony. Biorąc pod uwagę charakterystykę systemów operacyjnych, zaleca się stosowanie wersji 1.0
• skalowalne dla użytkownika – użytkownik będzie mógł zmienić skalę strony. Wartość może wynosić 1 lub 0. Zaleca się użycie 1, która jest liczbą domyślną. Ta pozycja umożliwia użytkownikowi dokonanie zmian w skali strony
• minimalna skala – najmniejszy obszar wyświetlania, wyświetlany w zakresie liczb od 0,1 do 1,0. Niektóre przeglądarki domyślnie ustawiają skalę, dlatego zaleca się ustawienie jej na 1,0, aby uniknąć niepożądanych niespodzianek
• maximum-scale – maksymalny rozmiar obszaru wyświetlania jest oznaczony zakresem od 0,1 do 1,0. Programistom zaleca się ustawienie wartości 1,0, aby wyłączyć skalowanie i pozostawienie proporcji na poziomie 1:1

Gdzie powinien znajdować się tag Viewport na stronie HTML?

Head – Jest to sekcja każdej strony HTML, która powinna zawierać parametr Viewport. Należy pamiętać, że niektóre przeglądarki nie honorują tagu adaptacji strony.

• Symbian
• Opera Mobile Mini
• Openwave

W takich przypadkach używane są stare tagi. Popularne narzędzia do tworzenia stron internetowych, takie jak WordPress, nie przypisują automatycznie opcji dostosowywania. Aby rozwiązać problem, musisz użyć specjalnej wtyczki. Nie oznacza to jednak, że metatag Viewport nie może zostać zapisany w kodzie. W takim przypadku wyszukiwarka potraktuje to jako błąd. Dlatego na stronie HTML musi być zapisane oznaczenie skali.