Adaptacja strony na urządzeniach mobilnych

1. Szerokość witryny na ekranach urządzeń mobilnych
2. Wysokość witryny na ekranach mobilnych
3. Skalowanie witryny na ekranach urządzeń mobilnych
4. Wynik
5. Czytaj także

Do przeglądania na urządzeniach przenośnych używany jest metatag viewport. Mówi przeglądarce, jak kontrolować wyświetlanie strony na urządzeniach mobilnych (obejmują one także tablety).

Ten metatag jest wstawiany do głównego kontenera witryny.

Zobacz przykład.

<meta name = "viewport" content = "width = szerokość urządzenia">

Domyślnie przeglądarki mobilne wyświetlają stronę w taki sam sposób, jak na komputerze. Co oczywiście psuje wygląd strony i czyni ją nieodpowiednią do korzystania z witryny na urządzeniach mobilnych.

Aby uzyskać bardziej szczegółowe ustawienia wyświetlania, użyj dodatkowych wartości.

Szerokość witryny na ekranach urządzeń mobilnych

Pozwala dostosować szerokość witryny do szerokości urządzenia ekranowego

<meta name = "viewport" content = "width = szerokość urządzenia">

To oczywiście poprawia oglądanie strony, ale tylko pod względem faktu, że szerokość witryny staje się taka sama jak szerokość ekranu urządzenia mobilnego. Ale od tego czasu nie ma absolutnie nieczytelnych stron znacznie zmniejsza tekst, obrazy itp. A także narusza modułową stronę sieci.

Aby strona była bardziej czytelna, ustawmy stałą szerokość wyświetlania strony i już przy tej szerokości będziemy edytować wyświetlanie tekstów, bloków itp. W stylach. W naszym przykładzie przyjmujemy jako podstawę szerokość witryny 600 pikseli

<meta name = "viewport" content = "width = 600">

W css szablonu wprowadzimy regułę medizapros, dla której zostaną zastosowane style o szerokości ekranu 600 pikseli. A ponieważ ustawiliśmy tę rozdzielczość, aby była wyświetlana na ekranach urządzeń mobilnych, będą używane style określone w ustawionych przez nas zasadach. Wspólne style zostaną zastosowane tak jak na zwykłym monitorze, ale jeśli określimy jakieś style w regułach, te style zostaną zastąpione domyślnymi.

Musimy również wziąć pod uwagę fakt, że ustawiając stałą szerokość wyświetlania treści, uzyskamy ten sam wynik przy różnych rozdzielczościach ekranu. W każdym razie, przy dowolnej rozdzielczości samego ekranu, strona będzie wyświetlana na pełnym ekranie. To da nam dwie główne zalety.

• Otrzymamy ten sam ekran przy różnych rozdzielczościach ekranu.
• Musimy zmieniać style tylko dla tego medizaprosa i nie dostosowywać się do każdej rozdzielczości ekranu

Ekran @media i (max-width: 600px) {...}

Wysokość witryny na ekranach mobilnych

W niektórych przeglądarkach mobilnych podczas interpolacji strony witryny wysokość witryny nie jest wyświetlana poprawnie.

Aby poprawić ten błąd, możemy użyć reguły

<meta name = "viewport" content = "height = device-height">

Skalowanie witryny na ekranach urządzeń mobilnych

Dzięki tej zasadzie możemy zezwolić lub zabronić mastabilizacji strony witryny.

pozwól

<meta name = "viewport" content = "user-scalable = yes">

Aby zakazać

<meta name = "viewport" content = "user-scalable = no">

Wynik

Dlatego stworzyliśmy naszą rzutnię, a także utworzyliśmy dla niej żądanie mediów.

W naszym zapytaniu medialnym stworzyliśmy dla nas niezbędne style. To, co zobaczyliśmy na rysunku 3 lub odniesienie (idziemy z urządzeń mobilnych)

rzutnia

<meta name = "viewport" content = "height = device-height, width = 600, user-scalable = yes">

prośba o media

@media screen i (max-width: 600px) {body {font-size: 1.5em; } ... ... ... ... h2 {rozmiar czcionki: 2,5em; }}

Rys.1 Wyświetlanie strony bez tagu meta rzutni

Rys.2 Wyświetlanie strony z atrybutem width = szerokość urządzenia

Rys.3 Wyświetlanie strony z szerokością atrybutu = 600

Czytaj także

1. Ramy adaptacyjne
2. Adaptacyjny układ dla urządzeń mobilnych

Dodaj komentarz