Dzień dobry, a raczej noc, drodzy przyjaciele. Jeszcze kilka minut temu dodawałem do szablonu kąpielówki. Szablon nie był adaptacyjny, a problem tkwił w jego strukturze, ukrywał część treści (była taka potrzeba), a przy wejściu z przeglądarki mobilnej (z telefonu lub tabletu) zarówno treść, jak i fragment strona została odcięta. Próbowałem naprawić to nieporozumienie i podczas „prób terenowych w praktyce” zdałem sobie sprawę, że najlepszym rozwiązaniem jest użycie tagu meta viewport.
Tag jest przeznaczony do prawidłowego skalowania witryny na różne urządzenia, na przykład na urządzeniach, w których rozdzielczość ekranu jest mniejsza niż to konieczne. Używaj tagu często w szablony adaptacyjne, ale niewiele osób wie, że może się przydać w zwykłych, nieresponsywnych projektach.
Przyjrzyjmy się możliwym regułom używania tagu:
1. Szerokość
W ten sposób wskazujemy liczbę całkowitą w pikselach (od 200px do 10000px) lub „szerokość urządzenia”. Ustawia to szerokość rzutni, jeśli szerokość nie jest określona dla Ciebie, jest ona pobierana automatycznie:
- 980px - dla mobilnego Safari
- 850px - Opera
- 800px - Android WebKit
- 974px — IE
2. Wysokość
Działa na tej samej zasadzie co szerokość. Jednak często w 99% przypadków jest po prostu po prostu nieużywany, więc nie możesz go ujawnić, jeśli nie wiesz, czy go potrzebujesz, czy nie. W każdym razie możesz z tym poeksperymentować...
3. Skala początkowa
Ten parametr określa skalę strony. Tutaj wszystko jest elementarne, zwiększ wartość - zwiększ skalę. Dostępne są dla niego następujące wartości, od 0,1 do 10. Jeśli ustawisz go na 1,0, wskażemy, że strona nie jest skalowana.
4. Skalowalny przez użytkownika
Określa, czy można zmienić skalę strony. Może dziedziczyć wartości tak lub nie. W przeglądarce Safari domyślna wartość to tak,
5. Skala minimalna oraz maksymalna skala
Te opcje definiują minimalną i maksymalną dozwoloną skalę dla metatagu rzutni. Dostępne dla niego wartości to od 0,1 do 10. Jeśli ustawisz go na 1,0, poinformujemy przeglądarkę, że nie skaluje strony. Przeglądarka mobilna Safari jest ustawiona na minimalną skalę = „0,25” i maksymalną skalę = „1,6”.
Przejdźmy teraz do przypadków użycia.
Zwykle metatag viewport służy do ustawiania szerokości i początkowej skali widocznego obszaru witryny na urządzeniach mobilnych, na przykład:
Możesz postępować dokładnie z tego samego przykładu, jeśli twoja treść nie jest szeroka (nie jest odcięta przez przeglądarkę), ale raczej wąska (gdzieś pojawia się pusta przestrzeń):
Typowym błędem, który możesz popełnić podczas używania tagu meta viewport, jest to, że będziesz używać wartości skala początkowa=1 dla nieresponsywnych szablonów. Co jest nie tak? Błędem jest tutaj to, że to ustawienie spowoduje renderowanie 100% strony bez skalowania. W związku z tym użytkownik będzie musiał samodzielnie ustawić skalę lub przewijać stronę przez długi czas.
Błąd może być również dzielenie się parametry skalowalny przez użytkownika=nie lub maksymalna-skala=1 razem z skala początkowa=1. Spowoduje to wyłączenie możliwości skalowania w witrynie (wł szablony mobilne Ta funkcja z pewnością może się przydać, ale trudno…). Ponieważ wyłączymy skalowanie, nie będziemy mogli zobaczyć całej strony.
Osobiście mogę ci tylko polecić. Jeśli Twój szablon nie ma możliwości dostosowania do urządzeń mobilnych i innych, rozmiary ekranu różnią się od tych, dla których zrobiłeś, pozostaw możliwość skalowania i nie zmieniaj rozmiaru skali.
Niektórzy uważają, że przewijanie w lewo lub w prawo jest bardzo złe i brzydkie. Oczywiście nie jest to złe, moim zdaniem raczej niewygodne, ale czasami taka potrzeba jest potrzebna. Na przykład mój klient ma stronę internetową. Ma pełną i mobilną wersję, każda z tych wersji jest różne szablony. W związku z tym w szablonie dla komputerów stacjonarnych nie ma sensu robić żadnych skomplikowanych adaptacji i dzwonków i gwizdków dla telefonów, wystarczy tag viewport, ale w komórce tak, wszystko jest dla telefonów. Tutaj wygodniej będzie komuś użyć, 2 alternatywy, że tak powiem ... Dziękuję wszystkim, powodzenia!
Ostatnia aktualizacja: 05.03.2016
Przede wszystkim spójrzmy na jeden z kluczowych punktów aplikacji projekt adaptacyjny- tag meta viewport (w rzeczywistości projektowanie adaptacyjne zaczyna się od tego tagu). Zacznijmy od następującej strony internetowej:
Zwykła strona internetowa
To jest standardowa strona internetowa, która w normalnej przeglądarce wyglądałaby tak:
Jeśli jednak uruchomimy tę samą stronę internetową na emulatorze urządzenia mobilnego lub na prawdziwym urządzenie przenośne, wtedy prawie nie możemy odczytać tego, co jest na nim napisane:
Dzięki zastosowaniu skalowania użytkownik może wreszcie zobaczyć, co tam jest napisane. Nie jest to jednak zbyt wygodne. Jednocześnie strona internetowa ma dużo pustej przestrzeni, co nie jest zbyt piękne.
Dlaczego to się dzieje? Faktem jest, że każda przeglądarka mobilna ustawia początkowe rozmiary strony, a następnie próbuje dostosować ją do rozmiarów ekranu bieżącego urządzenia mobilnego.
Cały widoczny obszar na ekranie przeglądarki jest opisany pojęciem Viewport . Zasadniczo rzutnia reprezentuje obszar, który przeglądarka internetowa próbuje dopasować do strony internetowej. Na przykład przeglądarka Safari na iPhonie i iPodzie ustawia domyślną szerokość widocznego obszaru na 980 pikseli. Oznacza to, że po otrzymaniu strony i wprowadzeniu jej do okna wyświetlania o szerokości 980 pikseli przeglądarka kompresuje ją do rozmiaru urządzenia mobilnego. Na przykład, jeśli szerokość ekranu smartfona wynosi 320 pikseli, wówczas strona zostanie skompresowana do tego rozmiaru. Wszystkie elementy na stronie będą miały zastosowany współczynnik skalowania 320/980.
Dlaczego w tym przypadku używa się 980 pikseli, a nie, powiedzmy, rzeczywistego rozmiaru ekranu? Chodzi o to, że domyślnie przeglądarka myśli, że każda strona internetowa jest przeznaczona dla komputerów stacjonarnych. A zwykłą szerokość witryny na komputery można uznać za 980 pikseli.
W takim przypadku każda przeglądarka ustawia własną szerokość obszaru widocznego obszaru, opcjonalnie 980 pikseli. Inne przeglądarki mogą obsługiwać różne wartości początkowej szerokości. Ale wykonają również skalowanie.
Aby uniknąć tego niezbyt przyjemnego obrazu, powinieneś użyć metatagu viewport. Ma następującą definicję:
W atrybucie content metatagu możemy zdefiniować następujące parametry:
Parametr | Wartości | Opis |
Akceptuje wartość całkowitą w pikselach lub wartość szerokości urządzenia | Ustawia szerokość obszaru rzutni |
|
Akceptuje wartość całkowitą w pikselach lub wartość wysokości urządzenia | Ustawia wysokość obszaru rzutni |
|
Określa współczynnik skalowania dla początkowego rozmiaru rzutni. Wartość 1.0 oznacza brak skalowania |
||
Określa, czy użytkownik może używać gestów do powiększania strony |
||
Liczba zmiennoprzecinkowa od 0,1 i więcej | Ustawia minimalną skalę rozmiaru rzutni. Wartość 1.0 oznacza brak skalowania |
|
Liczba zmiennoprzecinkowa od 0,1 i więcej | Ustawia maksymalną skalę rozmiaru rzutni. Wartość 1.0 oznacza brak skalowania |
Teraz zmodyfikujmy poprzednią przykładową stronę internetową za pomocą metatagu:
Zwykła strona internetowa
Strona internetowa wygląda zdecydowanie lepiej dzięki zastosowaniu metatagu viewport. Używając parametru width=device-width, mówimy przeglądarce internetowej, że początkowa szerokość widocznego obszaru nie powinna wynosić 980 pikseli lub jakaś inna liczba, ale rzeczywista szerokość ekranu urządzenia. Tak więc przeglądarka internetowa nie wykona żadnego powiększenia, ponieważ mamy tę samą szerokość i szerokość okienka ekranu.
Możemy również skorzystać z innych opcji, takich jak np. uniemożliwienie użytkownikowi skalowania wymiarów strony:
Tak się złożyło, że przeglądarki mobilne pojawiły się stosunkowo niedawno, a do tego czasu w sieci były już witryny duża ilość. Oczywiście wszystkie te witryny nie były w ogóle zoptymalizowane pod kątem małych ekranów smartfonów, a smartfony z kolei musiały wierzyć, że wszystkie witryny mają około 1000 pikseli szerokości (980 pikseli w safari). Trzeba było jakoś rozwiązać obecną sytuację, a Apple wymyślił metatag , który zgodnie z tradycją został później skradziony przez wszystkich innych producentów przeglądarek.
Spójrzmy na typowy epicki układ strony:
html
Witaj świecie
Otwórzmy go w przeglądarce mobilnej. Oto, co zobaczymy:
Jak słusznie zauważyłeś, tekst jest za mały, a stało się tak, ponieważ safari próbowało zmieścić się na naszej stronie (która zakłada, że jest przeznaczona dla przeglądarek o szerokości ekranu około 980px)
Powiedzmy teraz przeglądarce, że nasza witryna reaguje na każdą szerokość ekranu.
html
Co się stało:
Cóż, teraz wszystko jest znacznie lepsze. Wskazując width=device-width , powiedzieliśmy przeglądarce, że chcemy, aby obszar wyświetlania treści był równy szerokości ekranu urządzenia mobilnego.
Możesz ręcznie ustawić wartość szerokości. Na przykład content="width=320px" , ale nie jest to zalecane, ponieważ różne smartfony mogą mieć zupełnie różne szerokości ekranu.
Bardzo powszechną opcją jest:
html
ta opcja ustawia szerokość strony i początkową skalę (w tym przypadku bez skalowania)
Często używane jest również:
html
Takie wartości są używane, jeśli witryna będzie używana i funkcjonować jako Aplikacja mobilna. Tych
- gdy strona się załaduje, nie będzie skalowana
- strona zajmie całą szerokość przeglądarki mobilnej
- wszelkie niestandardowe skalowanie jest zabronione
- dostępne tylko przewijanie w poziomie i pionie
Używaj tej konfiguracji tylko wtedy, gdy wiesz, co robisz.
Przyjrzyjmy się poprawnym parametrom i ich wartościom dostępnym w metatagu rzutni.
szerokość
Liczba całkowita (od 200 pikseli do 10 000 pikseli) lub „szerokość urządzenia”.
Ustawia szerokość rzutni. Jeśli rzutnia nirina nie jest określona, to:
- w przypadku mobilnego safari jest to 980 pikseli
- Opera - 850px
- Android WebKit — 800 pikseli
- IE - 974px
wzrost
Liczba całkowita (od 223 do 10 000 pikseli) lub „wysokość urządzenia”
ustawia wysokość rzutni. W 99% przypadków po prostu zignoruj ten parametr, ale jeśli naprawdę tego potrzebujesz, spróbuj poeksperymentować. Powodzenia..
skala początkowa
1.0 - nie skaluj. Ustawia skalę strony. Zwiększ wartość - zwiększ skalę.
skalowalny przez użytkownika
Dostępne wartości to nie lub tak
Określa, czy można zmienić skalę strony. W Safari domyślnie jest tak.
minimalna skala i maksymalna skala
Dostępne wartości (od 0,1 do 10).
1.0 - nie skaluj. Określa odpowiednio minimalną i maksymalną skalę rzutni.
Wartość domyślna w mobilnej przeglądarce Safari to minimalna skala = „0,25” , maksymalna skala = „1,6”.
Rada: Nie używaj metatagów (w tym tego), dopóki nie zrozumiesz, dlaczego to wszystko jest potrzebne. I przetestuj wszystko inaczej przeglądarki mobilne. Powodzenia!
Witam wszystkich, dzisiaj porozmawiamy co to jest widok? i jak z niego korzystać.
Aby zrozumieć, co to jest, potrzebujesz jakiegoś urządzenia mobilnego. Teraz stwórzmy prosty html strona jak ta:
testowy post
to jest post testowy
kolejny post
To jest całkiem niezłe
nowy post
Teraz otwórzmy naszą stronę na urządzeniu mobilnym i co zobaczymy? I zobaczymy, że tekst jest za mały i trudny do odczytania. Jeśli jednak dodamy do tagu następujący tag treści głowa
Teraz tekst wygląda dobrze. Oto rysunek. Po lewej bez metki, a po prawej z nią
Dlaczego to się dzieje? Faktem jest, że domyślna przeglądarka myśli, że strona jest przeznaczona dla komputerowej wersji przeglądarki i stara się ją całkowicie dopasować do okna smartfona. Ustawiając tag, mówimy przeglądarce telefonu, że szerokość widoku jest równa szerokości smartfona. Oto taki prosty tag, ale bardzo pomaga przy tworzeniu wersja mobilna strona.
Możesz także ustawić skalę. Do tego jest używany skala początkowa
Jeśli chcesz uniemożliwić użytkownikowi powiększanie strony na swoim smartfonie, możesz napisać:
Ale musisz być ostrożny, ponieważ. zdarza się, że tekst jest dość trudny do odczytania i trzeba go powiększyć, ale jeśli jest to zabronione, spowoduje to niedogodności dla użytkownika.
Obsługa przeglądarki
Obsługa Androida, ale do wersji 2.2 . początkowa skala to 1.0
Symbian, Nokia 40 series, Motorola, Opera mobile/mini i NetFront nie Pomoc
IE obsługuje z 6 wersje
BlackBerry obsługuje od wersji 4.2.1
Jak widać, wsparcie jest jeszcze niekompletne, ale możesz już użyć tego tagu, ponieważ. większość nowych smartfonów już to rozumie.
Na tym kończy się ten artykuł, dziękuję za przeczytanie.
→ Adaptacja urządzenia CSS przez @viewportKiedy chcemy dostosować okno przeglądarki na naszym urządzeniu, zwykle używamy Znacznik HTML . Jednak, co dziwne, metatag nie jest „normatywny” – nie znajduje się w oficjalnym standardzie W3C.
Metatag viewport został zaimplementowany po raz pierwszy przez Apple na iPhonie, a następnie u innych dostawców przeglądarek. Dziś jest szeroko stosowany ze względu na popularność iOS, Androida i innych platform na tablety i smartfony.
Ponieważ metatag viewport służy wyłącznie do dostosowywania znaczników, możemy powiedzieć, że słusznie należy do CSS. Dlatego W3C dąży do standaryzacji nowa metoda adaptacja, w której sterowanie oknem jest przenoszone z HTML do CSS.
@reguła css viewport
Dzięki nowej regule @viewport mamy taką samą kontrolę okna, jak w przypadku metatagu, z wyjątkiem tego, że taka kontrola odbywa się wyłącznie przez CSS. Podobnie jak w przypadku metatagu, zaleca się ustawienie szerokości okna przeglądarki przy użyciu szerokości urządzenia niezależnej od urządzenia:
@viewport (szerokość: szerokość urządzenia; )
Dzisiaj @viewport jest używany przez programistów w "trybie snap" w IE10 − funkcja okien 8, co pozwala na pracę w trybie wielu okien. Co dziwne, IE10 ignoruje metatag, jeśli rozmiar okna jest mniejszy niż 400px, co uniemożliwia witrynom używającym tego metatagu optymalizację dla tak małych okien. Aby to naprawić, programiści powinni użyć wspomnianego powyżej parametru szerokości urządzenia lub zdefiniować regułę @viewport w zapytaniu o media.
Używanie @viewport w zapytaniach o media
Możemy użyć @viewport w zapytaniach o media. Na przykład poniższe zapytanie o media służy do ustawienia układu okna o szerokości mniejszej niż 400 pikseli (na przykład tryb wielu okien w IE10) do szerokości 320 pikseli.
@media screen i (max-szerokość: 400px) @-ms-viewport (szerokość: 320px; ) ... )
W ten przykład, jeśli urządzenie jest ustawione na zakres rozdzielczości od 640 do 1024 pikseli, reguła @viewport skaluje okno do 640 pikseli.
@media screen and (min-szerokość: 640px) i (max-szerokość: 1024px) ( @viewport ( szerokość: 640px; ) ... )
Nowe uchwyty @viewport
Chociaż możemy kontrolować funkcję powiększania i powiększania, niektóre właściwości rzutni - lub jak nazywa się je teraz "uchwytami" - uległy zmianie.
Powiększenie
Deskryptor powiększenia jest odpowiednikiem początkowej skali w metatagu. Poza skalą minimalną i maksymalną , istnieją deskryptory dla maks. powiększenia i min. powiększenia:
@viewport ( szerokość: szerokość urządzenia; powiększenie: 2; )
powiększenie użytkownika
Deskryptor powiększenia użytkownika jest równoważny parametrowi skalowalnemu przez użytkownika
@viewport ( szerokość: szerokość urządzenia; powiększenie użytkownika: stałe; )
Obsługa przeglądarki
Na dzień dzisiejszy reguła css @viewport jest obsługiwana tylko przez Operę i IE10. Wygląda na to, że Chrome i inne przeglądarki również wkrótce to zaimplementują. ten metatag ma wkrótce stać się nowym oficjalnym standardem internetowym.
Na razie musisz dodać prefiks dostawcy do reguły @viewport:
@-ms-viewport ( szerokość: szerokość urządzenia; ) @-o-viewport ( szerokość: szerokość urządzenia; ) @viewport ( szerokość: szerokość urządzenia; )
Oczywiście nadal musimy uwzględnić metatag okna roboczego w strona html, dlatego w najbliższym czasie nigdzie się nie wybiera. Ale patrzenie w przyszłość nie jest już takie straszne — dodanie reguły @viewport sprawia, że nasze witryny i aplikacje są przyjazne w przyszłości.