Projektowanie responsywnej strony internetowej -Viewport

Co to jest viewport?

Viewport (viewport) to widoczna obszar użytkownika na stronie.

Viewport różni się w zależności od urządzenia, na telefonie będzie mniejszy niż na ekranie komputera.

Przed tabletami i telefonami strony były projektowane tylko do ekranów komputerowych, a statyczne projekty i stałe rozmiary były bardzo powszechne.

Następnie, gdy zaczęliśmy korzystać z tabletów i telefonów do korzystania z Internetu, strony o stałym rozmiarze były zbyt duże, aby dostosować się do viewport. Aby rozwiązać ten problem, przeglądarki na tych urządzeniach skalują całą stronę proporcjonalnie, aby dopasować ją do rozmiaru ekranu.

To nie jest idealne! To tylko szybka poprawka.

ustawienie viewport

HTML5 wprowadził metodę, która pozwala projektantom stron internetowych na <meta> tagi do kontroli viewport.

Powinieneś zawrzeć w każdej stronie internetowej następujące <meta> Element viewport:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Dostarcza przeglądarce instrukcje dotyczące kontroli rozmiaru strony i proporcji skalowania.

width=device-width Część ustawień ustawia szerokość strony na szerokość ekranu urządzenia (w zależności od urządzenia).

Gdy przeglądarka załaduje stronę po raz pierwszy:initial-scale=1.0 Część ustawień początkowego poziomu skalowania.

Poniżej znajdują się przykłady stron internetowych bez metatagi viewport oraz ze znacznikiem viewport meta tag.

Wskazówka:Jeśli przeglądasz tę stronę za pomocą telefonu lub tabletu, możesz kliknąć na dwa poniższe linki, aby zobaczyć różnice.



Bez metatagi viewport


Z metatagiem viewport

Dostosowanie zawartości do rozmiaru widoku

Użytkownicy przywykli do przewijania w pionie na komputerach stacjonarnych i urządzeniach mobilnych, a nie poziomo!

Dlatego, jeśli zmusza się użytkownika do przewijania poziomego lub zmniejszania strony, aby zobaczyć całą stronę, może to prowadzić do złego doświadczenia użytkownika.

Dodatkowe zasady do przestrzegania:

1. Nie używaj dużych elementów o stałej szerokości - Na przykład, jeśli szerokość obrazu jest większa niż szerokość viewport, może to spowodować poziome przewijanie viewport. Upewnij się, że dostosuj tę zawartość, aby pasowała do szerokości viewport.

2. Nie pozwalaj zawartości polegać na konkretnej szerokości viewport, aby dobrze się prezentować - Ze względu na różnice w rozmiarze i szerokości ekranów w różnych urządzeniach, zawartość nie powinna polegać na konkretnej szerokości viewport, aby prezentować się dobrze.

3. Użyj zapytań mediowych CSS do zastosowania różnych stylów dla małych i dużych ekranów - Ustawienie większej absolutnej szerokości CSS dla elementów strony spowoduje, że element będzie zbyt szeroki dla mniejszych urządzeń. Zamiast tego, rozważ użycie wartości szerokości względnej, takich jak width: 100%. Dodatkowo, uważaj na użycie dużych wartości absolutnej lokalizacji, co może spowodować, że element wyślizgnie się poza viewport małych urządzeń.