Adaptacja strony mobilnej staje się coraz bardziej popularna ze względu na rosnącą liczbę smartfonów i tabletów. Co ona reprezentuje? Jakie są korzyści? To pytanie jest szczególnie istotne dla właścicieli sklepów internetowych, witryn różnych firm usługowych, blogów i popularnych forów. Jak witryna może się dostosować do urządzeń mobilnych? Oto mała lista problemów, które rozważymy w artykule.

Informacje ogólne

A więc na początek rozważmy, co stanowi projekt adaptacyjny. Jest to tak zwana konfiguracja, w której wszystkie urządzenia wysyłają ten sam kod HTML, ale rozmiar elementów jest dostosowywany za pomocą CSS. Różne wyszukiwarki są w stanie rozpoznać takie witryny, pod warunkiem, że strony i zasoby są otwarte do skanowania. Aby wskazać przeglądarkę dla takiej możliwości, używany jest znacznik meta name = "viewport". Co to jest adaptacja strony na urządzenia mobilne?

Rozważ tag

Musisz więc upewnić się, że tag meta name = "viewport". Dlaczego on Zawiera instrukcje przeglądarki dotyczące dostosowywania rozmiaru i skalowania strony, biorąc pod uwagę szerokość ekranu urządzenia, z którego strona jest oglądana. Jeśli nie dodasz tego małego elementu, strona domyślna pokaże stronę komputerową. Jednocześnie przeglądarki mobilne będą próbowały zoptymalizować zawartość, co znajdzie odzwierciedlenie w zwiększeniu czcionek, skalowalności treści lubwyświetlanie części treści wyświetlanej na ekranie. Czy to miłe Nie, wersja mobilna witryny w tym przypadku spowoduje tylko negatywne postrzeganie. W końcu czcionki będą nieproporcjonalne, będą musiały przewijać stronę i wykonywać szereg czynności, które mimo że są drugorzędne, ale wciąż żmudne. Możesz sprawdzić adaptację strony na urządzenia mobilne za pomocą smartfona, tabletu lub specjalnych usług i programów. Oczywiście pierwsze dwie opcje są lepsze, ale jeśli potrzebujesz dokładnej analizy z punktu widzenia różnych urządzeń i zaoszczędzić czas, to te ostatnie będą pasować.

Jakie są zalety dostosowania witryny do urządzeń mobilnych?

Zastosowanie tego podejścia pozwala:

Użytkownikom udostępniać treści w przypadkach, gdy mają jeden adres.

Algorytmy wyszukiwarek uzyskują dokładne parametry strony, nie ma zamieszania z różnymi wersjami.

Zmniejszyć prawdopodobieństwo błędów.

Skróć czas pobierania z powodu konieczności ponownego indeksowania.

Oszczędzaj zasoby.

Dodatkowo łatwiej jest stworzyć stronę adaptacyjną niż kilka opcji na coś innego. Przystosowanie witryny do urządzenia mobilnego (to całkiem możliwe, aby zrobić to samemu) nie jest czymś skomplikowanym, wystarczy znać javascript i móc pracować z kaskadowymi arkuszami stylów (CSS) i obrazami. Istnieje wiele podejść do tego zadania. Artykuł omawia trzy najbardziej popularne opcje:

Nacisk na javascript.

Kombinacja.

Dynamiczne wykorzystanie javascript.

Chodźmyrozważ je bardziej szczegółowo.

Adaptacja za pomocą javascript

W tym przypadku używana jest jedna treść. W przypadku javascript formatowanie zmienia się wraz z mechanizmem działania strony. Wszystko w takich przypadkach zależy od platformy. Ten algorytm jest podobny do kaskadowych zapytań o media arkusza stylów. Rozważmy mały przykład pracy w praktyce. Mamy więc stronę z kodem HTML zawierającym kombinację element

W tym przypadku adaptacja do strony urządzenia mobilnego jest używana ze względu na kombinację funkcji javascript i funkcji serwera. Jak wygląda ogólny schemat? Użytkownik wchodzi na stronę z określonego urządzenia. javascript pobiera informacje o tym, czego używał i wysyła je na serwer. Wygenerowany jest wymagany kod, który jest następnie wysyłany do urządzenia. Informacje na ten temat są przechowywane w plikach cookie. Podczas kolejnej wizyty serwer odczytuje dane dokładnie od nich. Cechą tego podejścia jest możliwość korzystania z różnych wariantów kodu HTML. To prawda, że ​​dla właściwej pracy należy zadbać o obecność nagłówka Vary: User-agent. Mobilna wersja strony w tym przypadku wymaga trochę więcej pracy.

Dynamiczny javascript i inne opcje

W tym przypadku zakłada się, że ten sam kod zostanie dostarczony z konkretnym elementem wskazującym zewnętrzny plik, którego treść zmienia się w zależności od tego, który agent jest używany. Oznacza to, że będziemy mieć dynamiczną stronę przed nami. Jak jest wdrażany? Wiele osób korzysta z tego samego Vary: User-Agent. I podczas pracy zInformacje o stronach będą ponadto aktualizowane w czasie rzeczywistym, co oczywiście jest bardzo dobre. Wiele się mówi o teorii. Jak nie wspomnieć o virgins (), z którym można dosłownie "żonglować" wyglądem strony i wieloma innymi różnymi rzeczami. Ale jesteśmy zainteresowani, jak to zrobić!

Przygotowanie do wdrożenia

Należy zauważyć, że istnieją dwa podejścia do wykonywania takich zadań, jak tworzenie miejsca adaptacyjnego:

Podręcznik.

Automatyczne.

Najpierw musisz wybrać, którą drogą iść. Tak, wtyczka do dostosowania witryny do urządzeń mobilnych pomoże ci szybko wykonać całą pracę. Ale tylko wtedy, gdy wszystko powstaje zgodnie z pewnymi, jasno uregulowanymi zasadami. Jeśli zasób został utworzony zgodnie z nim, program dostosowania witryny do urządzenia mobilnego musi zrobić wszystkie kłopoty. Z powodu takich ograniczeń, a czasem innych momentów, a także braku pełnej swobody twórczej, większość dokonuje wyboru na rzecz strojenia ręcznego. I programy, chociaż pomagają dosłownie w ciągu kilku minut, aby uzyskać atrakcyjną wersję zasobu, ale nadal mają pewne wady.

Elastyczny układ

Aby uzyskać dosłowne "cukierki", musisz użyć tylko względnych jednostek miary. W praktyce wszystkie czcionki pasują do em, a rozmiar elementów jest podawany jako procent. Chociaż jest to możliwe od czasu do czasu (jeśli naprawdę chcesz) i rh, ale lepiej się bez nich obejść. Po określeniu szerokości lub wysokości należy użyć stałej stałej liczby 10801260lub 768 i procent. Jako przykład - szerokość: 90%. Możesz wykonać zarówno 80%, jak i 99% oraz 100%. Wszystko zależy od pragnienia czarodzieja. Ale co z tekstem pojawiającym się w danym elemencie? W tym przypadku jest jedna bardzo dobra formuła: szerokość czcionki jest podzielona na ten sam wskaźnik komponentu tła, a otrzymujemy wynik lśnienia. Czasami zdarza się, że liczby mogą być bardzo długie. Na przykład standardem jest 1260. Pojawiają się użytkownicy o szerokości ekranu 780. W dziale będziemy mieć bardzo długą liczbę. Pamiętaj, aby to zaokrąglić? Tutaj sytuacja jest skomplikowana. Wielu nie zaleca tego kategorycznie. Najlepiej spojrzeć na sytuację i docenić znaczenie dokładności. Można na przykład ustawić, że uwzględniane są tylko dwa, trzy, cztery lub dziesięć miejsc dziesiętnych. Uwierz mi, ta prosta praca jest tutaj, ta adaptacja strony na urządzenia mobilne. CSS, jeśli zawiera wpisy wolne od błędów, będzie mógł odtworzyć wszystkie.

Elastyczność czcionek, obrazów i żądania mediów

Domyślnie w rozmiarach czcionki rozmiar czcionki ustawiony jest na 16 pikseli. Ale, jak już wspomniano, takie podejście jest bardzo niepożądane. Co robić w tym przypadku? Następnie musisz podzielić wartość podstawowego. Rozważmy kilka przykładów:

16/16 = 1 em.

18/16 = 1125 em.

Wynik końcowy musi być napisany czcionką po dodaniu dwukropka. To prawda, że ​​jeśli te wartości mają być uwzględnione w przyszłości gdzie indziej, należy pamiętać, że wyświetlona zostanie właśnie wprowadzona wartość. A teraz dla obrazów. Wszystko może być wykonane albo w ich atrybutach, albo w kaskadowym arkuszu stylówużywając maksymalnej szerokości. Nie zapominaj, że rozmiar jest podany w procentach! I jeszcze kilka słów o zapytaniach o media. Mogą być stosowane w przypadkach, gdy konieczne jest ustawienie określonych warunków. Na przykład, jeśli szerokość ekranu jest mniejsza niż 1260 pikseli, zostaną zastosowane reguły zainwestowane w żądanie mediów. Co mogą zrobić? Jeśli mamy dobry obraz tła, który powinien być wyświetlany w całości, a użytkownik ma mały ekran, w takim przypadku można go zamówić. W pewnym sensie zapytania o media przypominają konstrukt if. Ale ich osobliwość jest bardzo dużą indywidualnością. Mogą rejestrować wszystkie zmiany, które należy wprowadzić podczas pracy z przeglądarkami o określonych rozmiarach.

Wniosek

Liczba urządzeń mobilnych i osób, które ich używają stale rośnie. Dlatego bardzo pożądane jest, aby w układzie strony przed jej rozpoczęciem opracować nawet najdrobniejsze detale, nie zapominając o koncepcjach. W końcu należy upewnić się, że użytkownicy logujący się do witryny z telefonów nie pobierają danych, które nie będą wyświetlane. Dlaczego? Cóż, jest elementarny - nie spowalnia ładunków strony. Lepiej jest ładować dane małymi porcjami, a sama strona działała szybko i sprawnie.