Czym jest rzutni?
Rzutnia jest widoczny obszar użytkownika strony internetowej.
Rzutnia zmienia się wraz z urządzeniem, a mniejsza od telefonu komórkowego nie na ekranie komputera.
Przed tabletów i telefonów komórkowych, strony internetowe zostały zaprojektowane wyłącznie dla monitorów komputerowych, a to było wspólne dla stron internetowych, aby mieć statyczny projekt i stały rozmiar.
Potem, kiedy zaczęliśmy surfowania po Internecie przy użyciu tabletek i telefonów komórkowych, stały rozmiar strony WWW były zbyt duże, aby zmieścić rzutnię. Aby rozwiązać ten problem, przeglądarki na tych urządzeniach skalowane w dół całą stronę internetową, aby dopasować go do ekranu.
To nie był idealny !! Ale szybko naprawić.
Ustawianie rzutni
HTML5 wprowadzono metodę aby projektanci stron internetowych przejąć kontrolę nad rzutni, poprzez <meta> tag.
Powinien zawierać następujące <meta> elementu rzutni we wszystkich swoich stronach internetowych:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta> Element rzutnia daje instrukcje przeglądarki w jaki sposób kontrolować wymiary i skalowanie strony.
width=device-width częścią ustawia szerokość strony śledzić szerokości ekranu urządzenia (które będą się różnić w zależności od urządzenia).
initial-scale=1.0 częścią ustawia początkowy poziom powiększenia, gdy strona jest najpierw ładowany przez przeglądarkę.
Oto przykład strony internetowej bez wziernika tagu meta, i tej samej stronie z tagiem meta rzutni:
Wskazówka: Jeśli przeglądasz stronę z telefonem lub tabletem, można kliknąć na dwie linki, aby zobaczyć różnicę.
Rozmiar utworu do rzutni
Użytkownicy służą do przewijania stron pionowo na obu komputerach i urządzeniach mobilnych - a nie poziomo!
Tak więc, jeśli użytkownik jest zmuszony do przewijania w poziomie lub pomniejszyć, aby zobaczyć całą stronę internetową Wynika to w złym doświadczeniem użytkownika.
Niektóre dodatkowe zasady do naśladowania:
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 większej niż rzutni może spowodować, że rzutnia do przewijania w poziomie. Pamiętaj, aby dostosować zawartość strony w celu dopasowania do szerokości rzutni.
2. Nie pozwól treść opiera się na określonej szerokości rzutni dobrze render - Ponieważ wymiary i szerokości ekranu w CSS pikseli różnią się znacznie między urządzeniami, zawartość nie powinna opierać się na określonej szerokości rzutni dobrze czynią.
3. Zastosowanie CSS zapytania mediów zastosować inną stylistykę dla małych i dużych ekranów - Ustawianie dużych szerokościach absolutne CSS dla elementów stron, spowoduje, że element jest zbyt szeroki dla rzutni na mniejszym urządzeniu. Zamiast tego, należy rozważyć użycie względnych wartości takie jak szerokość, szerokość: 100%. Należy także zachować ostrożność przy użyciu dużych bezwzględnych wartości pozycjonowania. Może to spowodować, że element nie wchodzą w rzutni na małych urządzeniach.