Responsywne projektowanie stron internetowych — The Viewport
Co to jest rzutnia?
Widoczny obszar to widoczny dla użytkownika obszar strony internetowej.
Widoczny obszar różni się w zależności od urządzenia i będzie mniejszy na telefonie komórkowym niż na ekranie komputera.
Przed tabletami i telefonami komórkowymi strony internetowe były projektowane wyłącznie na ekrany komputerów i często zdarzało się, że strony internetowe miały statyczny wygląd i stały rozmiar.
Następnie, gdy zaczęliśmy surfować po Internecie za pomocą tabletów i telefonów komórkowych, strony internetowe o stałym rozmiarze były zbyt duże, aby zmieścić się w widocznym obszarze. Aby to naprawić, przeglądarki na tych urządzeniach przeskalowały całą stronę internetową, aby dopasować ją do ekranu.
To nie było idealne!! Ale szybka naprawa.
Ustawianie rzutni
HTML5 wprowadził metodę umożliwiającą projektantom stron internetowych przejęcie kontroli nad widocznym obszarem za pomocą
<meta>tagu.
Powinieneś dołączyć następujący <meta>element widoku na wszystkich swoich stronach internetowych:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Daje to przeglądarce instrukcje dotyczące kontrolowania wymiarów i skalowania strony.
Część width=device-widthustawia szerokość strony zgodnie z szerokością ekranu urządzenia (która będzie się różnić w zależności od urządzenia).
Część initial-scale=1.0ustawia początkowy poziom powiększenia, gdy strona jest ładowana po raz pierwszy przez przeglądarkę.
Oto przykład strony internetowej bez metatagu viewport i tej samej strony internetowej z metatagiem viewport:
Wskazówka: jeśli przeglądasz tę stronę za pomocą telefonu lub tabletu, możesz kliknąć dwa powyższe linki, aby zobaczyć różnicę.
Rozmiar zawartości do rzutni
Użytkownicy są przyzwyczajeni do przewijania witryn w pionie zarówno na komputerach stacjonarnych, jak i urządzeniach mobilnych - ale nie w poziomie!
Tak więc, jeśli użytkownik jest zmuszony do przewijania w poziomie lub pomniejszania, aby zobaczyć całą stronę internetową, powoduje to słabsze wrażenia użytkownika.
Kilka dodatkowych zasad, których należy przestrzegać:
1. NIE używaj dużych elementów o stałej szerokości — na przykład, jeśli obraz jest wyświetlany na szerokości szerszej niż rzutnia, może to spowodować przewijanie rzutni w poziomie. Pamiętaj, aby dostosować tę zawartość do szerokości widocznego obszaru.
2. NIE pozwól, aby treść była dobrze renderowana na określonej szerokości widocznego obszaru — ponieważ wymiary ekranu i szerokość w pikselach CSS różnią się znacznie między urządzeniami, treść nie powinna polegać na określonej szerokości widocznego obszaru, aby była dobrze renderowana.
3. Użyj zapytań o media CSS, aby zastosować różne style dla małych i dużych ekranów — ustawienie dużych bezwzględnych szerokości CSS dla elementów strony spowoduje, że element będzie zbyt szeroki dla widocznego obszaru na mniejszym urządzeniu. Zamiast tego rozważ użycie względnych wartości szerokości, takich jak szerokość: 100%. Należy również uważać na używanie dużych bezwzględnych wartości pozycjonowania. Może to spowodować, że element wypadnie poza widoczny obszar na małych urządzeniach.