it-swarm-eu.dev

Czy metatag viewport jest naprawdę potrzebny?

Stworzyłem kilka responsywnych stron, ale jestem raczej nowy w tworzeniu responsywnych stron. W moim CSS 99% moich wartości jest w ems lub procentach. Używam zapytań o media (zarówno max-width, jak i max-device-width), aby wprowadzić zmiany w układzie. Nie umieściłem metatagu viewport i działa on idealnie na iOS, na wielu telefonach i tabletach z Androidem, na których testowałem i na wszystkich przeglądarkach. 

Dodanie metatagu zrywa moją witrynę. Czy robię coś złego lub robię coś dobrze, że nie muszę go włączać? Jestem zdezorientowany, dlaczego wydaje się, że jest to najlepsza praktyka, ponieważ łamie moje rzeczy.

Czy czegoś mi brakuje?

42
Jeffpowrs

W systemach operacyjnych na komputery stacjonarne rzutnie przeglądarki mają stałą liczbę pikseli szerokości, a zawartość strony internetowej jest renderowana w takiej postaci, w jakiej jest.

Począwszy od Safari na iOS (lub cokolwiek, co wtedy mieliśmy wywoływać iOS), okna przeglądarki mobilnej były „wirtualne”. Chociaż rzutnia może zajmować tylko (na przykład) 320 pikseli przestrzeni fizycznej w interfejsie, przeglądarka tworzy „wirtualną” rzutnię, która jest większa (domyślnie 980 pikseli szerokości na iOS) i renderuje tam zawartość, następnie powiększa wirtualną rzutnię, aż pasuje do rzeczywistych fizycznych pikseli dostępnych na ekranie urządzenia.

Metatag viewport pozwala powiedzieć przeglądarce mobilnej, jaki powinien być rozmiar wirtualnej rzutni. Jest to często przydatne, jeśli w rzeczywistości nie zmieniasz wyglądu witryny dla urządzeń mobilnych, a renderowanie jest lepsze dzięki większej lub mniejszej wirtualnej rzutni. (Uważam, że domyślnie wybrano 980 pikseli, ponieważ wykonał on dobrą robotę w renderowaniu wielu głośnych witryn w 2007 r.; Dla każdej witryny inna wartość może być lepsza).

Osobiście zawsze używam <meta name="viewport" content="width=device-width, initial-scale=1">, aby wirtualna rzutnia odpowiadała wymiarom urządzenia. (Zauważ, że initial-scale=1 wydaje się być konieczny, aby wirtualna rzutnia dostosowywała się do trybu poziomego w iOS .) To sprawia, że ​​przeglądarki mobilne zachowują się tak, jak zawsze mają przeglądarki na komputerze, do czego jestem przyzwyczajony.

Bez tagu meta viewport Twoja witryna zostanie wyświetlona w domyślnej wirtualnej rzutni urządzenia. Nie sądzę, że koniecznie problem, zwłaszcza jeśli wszystkie twoje jednostki są ems lub procentami, jak mówisz. Ale może być nieco mylące, jeśli w jakimkolwiek momencie musisz myśleć w pikselach, zwłaszcza że różne przeglądarki mogą mieć domyślne wirtualne rzutnie o różnych rozmiarach. Może również być mylące dla kolejnych opiekunów, jeśli nie rozumieją podejścia.

Wyobrażam sobie, że ustawiłeś swój podstawowy rozmiar czcionki dość duży, aby był czytelny? Czy możesz połączyć się z jedną z witryn, które stworzyłeś w ten sposób, aby zobaczyć przykład?

59
Paul D. Waite

Aby odpowiedzieć na moje własne pytanie. To nie jest konieczne.

Można użyć zapytań o media o szerokości min i max, aby nadać styl wersji pulpitu w określonych punktach przerwania.

Następnie aktualizujesz przede wszystkim rozmiar czcionki i inne właściwości specjalnie dla tabletów i telefonów. Tak jak powiedziałem, zwiększa to przede wszystkim rozmiar czcionki dla czytelności.

Ta metoda ma jednak poważny problem z konserwacją.

Metatag viewport pozwala po prostu użyć maksymalnej i minimalnej szerokości, która rozciąga się od pulpitu do urządzeń mobilnych.

7
Jeffpowrs

Bez viewportu twoje urządzenie korzysta z wirtualnej rzutni, która domyślnie jest pomniejszoną wersją twojej strony, to jest około 980 px na iPhone i 800px na andriod. Jak tylko ustawisz rzutnię i wyłączysz to powiększanie, urządzenie traktuje stronę tak, jak powinna i mierzy około 480 pikseli szerokości lub 320 pikseli w zależności od urządzenia i orientacji itp.

Pełny zasób poniżej, moja rada jest taka, że ​​za każdym razem, gdy pracujesz z responsywnym i mobilnym, zawsze ustaw najpierw rzutnię. Jest to najlepszy sposób na znormalizowanie powiększenia urządzenia i upewnienie się, że witryna jest wyświetlana przy użyciu rzeczywistej szerokości urządzenia, a nie dowolnej szerokości wirtualnej.

http://www.javascriptkit.com/dhtmltutors/cssmediaqueries3.shtml

7
JamieM23

Nie dla wszystkich urządzeń, ale tak dla telefonów komórkowych . Przeglądarki mobilne renderują strony w wirtualnym „oknie”, które jest zwykle szersze niż ekran, więc nie muszą wciskać każdego układu strony w małe okienko (stąd przerywa niektóre witryny niezoptymalizowane dla urządzeń mobilnych i użytkownicy muszą powiększać). Mobile Safari wprowadził „metatag viewport”, aby umożliwić twórcom stron internetowych kontrolowanie rozmiaru i skali rzutni. Teraz wszystkie przeglądarki mobilne obsługują ten tag, mimo że jest nie jest częścią żadnego standardu internetowego . Typowa witryna zoptymalizowana na telefon komórkowy powinna zawierać następujący tag:

<meta name="viewport" content="width=device-width, initial-scale=1">

Właściwość width kontroluje rozmiar rzutni. Szerokość ekranu w pikselach CSS w skali 100% Właściwość początkowej skali kontroluje poziom powiększenia po pierwszym załadowaniu strony. Właściwości maksymalnej skali, minimalnej skali i skalowalne przez użytkownika kontrolują sposób, w jaki użytkownicy mogą powiększać lub pomniejszać stronę.

https://developer.Apple.com/library/prerelease/ios/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html#//Apple_ref/doc/uid/TP40006509-SW19

4
Shantanu

Powinieneś zdecydowanie używać tagów viewport, ponieważ mają one możliwość uczynienia twórców stron internetowych nieskończenie prostszym. Pozwalają one łatwo kontrolować dokładne wymiary renderowania i/lub poziomy powiększenia DOWOLNEGO ekranu (nawet na pulpicie jeśli chcesz). To sprawia, że ​​budowanie strony internetowej dla dowolnego urządzenia to bułka z masłem. Ale wiedz, że z wielką mocą przychodzi wielka odpowiedzialność. Używaj tej mocy mądrze (i NIE WYŁĄCZAJ zoomu).

3
JoostS

Nadal można użyć metatagu rzutni, aby zoptymalizować rozdzielczość do widoku urządzenia i umożliwić użytkownikowi powiększanie:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0
">

Dzięki zdefiniowanej maksymalnej skali możesz kontrolować, jak użytkownik ją powiększa. Myślę, że powinniśmy włączyć tę opcję, ponieważ nawet z responsywną stroną internetową, którą chcę powiększyć, dowiaduje się, że już jest tak intuicyjna, że ​​staje się oczekiwaniem.

Tak, jest to niezbędny tag do tworzenia responsywnych stron. Jednak używanie samego tagu nie pomoże Ci w tym, ale zdecydowanie ułatwiają tworzenie responsywnych stron, pozwalając Ci kontrolować rozmiar widocznej zawartości Twojej strony internetowej .

1
aditya

Dla każdego, kto ma wątpliwości, najłatwiej jest przetestować bez niego. Zrobiłem to i doszedłem do rozwiązania Swift - jeśli musiałbym zachować tylko jeden tag meta, to byłby to (powyżej „opisu” i cokolwiek). Właściwie, gdybym musiał wybierać między tym a wszystkimi innymi, dałbym i wszystkim. Sprawdź to!

0
Lucian Davidescu