Skutki uboczne usuwania „width = device-width” z metatagu rzutni, gdy ustawiona jest również „initial-scale = 1.0”

Chociaż <meta name="viewport">tag jest niestandardowy, „jest respektowany przez większość przeglądarek mobilnych ze względu na faktyczną dominację”.

Wadą tego, że nie jest to prawdziwy standard internetowy, jest szczegółowa dokumentacja, która nie jest tak dostępna, jak inne standardy. Grupa robocza CSS posiada specyfikację tego, więc jest to co ja głównie stosując jako autorytatywny pracy.

Moje główne pytanie brzmi:

Jaka byłaby postrzegana różnica między następującymi deklaracjami?

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

<meta name="viewport" content="initial-scale=1.0">

Alternatywnie zapytano, jakie są różnice między tymi dwoma zasadami @viewport CSS:

/* Translated from <meta name="viewport" content="width=device-width, initial-scale=1.0"> */
@viewport {
    zoom: 1.0;
    min-width: extend-to-zoom;
    max-width: 100vw;
}

/* Translated from <meta name="viewport" content="initial-scale=1.0"> */
@viewport {
    zoom: 1.0;
    min-width: extend-to-zoom;
    max-width: extend-to-zoom;
}

Jak doszedłem do tych @viewporttłumaczeń:

width=device-width do min-width: extend-to-zoom; max-width: 100vw;

Dokument CSS Module Adaptation Level Level 1 stwierdza:

Właściwości widthi heightrzutni <META>są tłumaczone na widthi heightdeskryptory, ustawiając wartość min-width/ na min-heightwartość extend-to-zoomi max-width/ max-heightna długość z rzutni.

Dodatkowo podają przykład :

Ten <META>element:

<meta name="viewport" content="width=500, height=600">

przekłada się na:

@viewport {
    width: extend-to-zoom 500px;
    height: extend-to-zoom 600px;
}

widthDeskryptor skrótem opisany jest jako:

Jest to skrótowy deskryptor do ustawiania zarówno min-widthi max-width. Jedna <viewport-length>wartość ustawi zarówno tę wartość, jak min-widthi max-widthtę. Dwie <viewport-length>wartości zostaną ustawione min-widthna pierwszą i max-widthna drugą.

Tak więc rozumowanie width: extend-to-zoom 500px;jest równoznaczne z min-width: extend-to-zoom; max-width: 500px;.

To pozostawia tylko 100vwczęść. W sekcji 10.4 wyjaśniają:

device-widthi device-heightprzetłumacz odpowiednio na 100vw i 100vh

W ten sposób możemy wreszcie zobaczyć, w jaki sposób width=device-widthjest przetłumaczony min-width: extend-to-zoom; max-width: 100vw;.

initial-scale=1.0 do zoom: 1.0; width: extend-to-zoom;

Ten jest dosłowny przykład :

Ten <META>element:

<meta name="viewport" content="initial-scale=1.0">

przekłada się na:

@viewport {
    zoom: 1.0;
    width: extend-to-zoom;
}

Drugie pytanie, które tu mam, to jaka dokładnie jest extend-to-zoomwartość?

Dokumentacji na nim i jego procedury rozstrzygania są trudne do uchwycenia. Gdyby ktoś mógł wskazać mi dalsze przykłady, które byłyby bardzo mile widziane.

Oprócz wszystkiego powyżej stworzyłem szybką stronę - https://romellem.github.io/temp-site/viewport/ - w celu przetestowania niektórych konfiguracji rzutni.

Mianowicie:

• content = "szerokość = szerokość urządzenia, początkowa skala = 1,0"
• content = „initial-scale = 1.0”

Może to pomóc w testowaniu.

Zanim przejdziemy do tego, o co pytasz, najpierw przejrzyjmy trochę, dlaczego viewportmetatag istnieje w pierwszej kolejności. Oto, co zebrałem.

Dlaczego potrzebujemy viewporttagu?

Rzutnia to obszar, w którym można zobaczyć zawartość sieci. Zazwyczaj renderowana strona (treść internetowa) jest większa niż rzutnia. W rezultacie zwykle używamy pasków przewijania, aby zobaczyć ukrytą zawartość (ponieważ rzutnia nie może wyświetlić wszystkiego). Cytat z modułu adaptacji urządzeń CSS poziom 1 :

Wąska rzutnia stanowi problem w przypadku dokumentów zaprojektowanych tak, aby wyglądały dobrze w przeglądarkach komputerowych. W rezultacie dostawcy przeglądarek mobilnych używają ustalonego początkowego rozmiaru bloku, który różni się od rozmiaru rzutni i jest zbliżony do rozmiaru typowego okna przeglądarki na pulpicie. Oprócz przewijania lub przesuwania, powiększanie jest często używane do przełączania między przeglądem dokumentu i powiększania określonych obszarów dokumentu do czytania i interakcji.

W urządzeniach mobilnych (i innych mniejszych urządzeniach) początkowy blok zawierający jest zwykle większy niż rzutnia. Na przykład urządzenie mobilne o szerokości ekranu 640pxmoże mieć początkowy blok zawierający 980px. W takim przypadku początkowy blok zawierający zostaje zmniejszony, aby 640pxmożna go było dopasować do ekranu telefonu komórkowego. Ta 640pxszerokość (szerokość ekranu) nazywana jest initial-widthoknem widoku, które będzie istotne dla naszej dyskusji.

Więc .... Dlaczego potrzebujemy tego viewporttagu? Cóż, obecnie mamy zapytania dotyczące mediów, które pozwalają nam projektować dla urządzeń mobilnych. Jednak to zapytanie o media zależy od rzeczywistej szerokości rzutni. W urządzeniach mobilnych agent użytkownika automatycznie stylizuje początkowy rozmiar rzutni na inny ustalony (zwykle większy niż początkowy rozmiar rzutni). Jeśli więc szerokość rzutni urządzenia mobilnego zostanie ustalona, ​​reguły CSS, których używamy w zapytaniach o media, nie zostaną wykonane tylko dlatego, że szerokość rzutni nigdy się nie zmienia. Korzystanie z viewportznacznik, możemy kontrolować na rzeczywistą szerokość rzutni (po czym stylizowany przez UA). Cytat z MDN :

Jednak ten mechanizm nie jest tak dobry w przypadku stron zoptymalizowanych pod kątem wąskich ekranów przy użyciu zapytań o media - jeśli na przykład wirtualna rzutnia ma rozmiar 980px, zapytania o media, które uruchamiają się w rozdzielczości 640px lub 480px lub mniejszej, nigdy nie będą używane, co ogranicza skuteczność takich responsywne techniki projektowania.

Pamiętaj, że viewportznacznik może również zmieniać rzeczywistą wysokość rzutni, a nie tylko szerokość

viewport tag width

widthW viewporttagu jest tłumaczony max-widthw @viewportregule. Kiedy zadeklarujesz widthjako device-width, jest to tłumaczone 100%w @viewportregule. Wartość procentowa jest ustalana na podstawie initial-widthrzutni. Jeśli więc nadal korzystamy z powyższego przykładu, wartość max-widthrozwiąże się do wartości 640px. Jak się dowiedziałeś, określa to tylko max-width. min-widthBędzie automatycznie extend-to-zoom.

extend-to-zoom

Twoje pytanie brzmiało, jaka jest dokładnie wartość rozszerzenia do powiększenia ? Z tego, co zebrałem, jest to wartość używana do obsługi rzutni rozszerzającej się tak, aby pasowała do obszaru wyświetlania na danym poziomie powiększenia. Innymi słowy, jest to wielkość rozmiaru rzutni, która zmienia się w zależności od określonej wartości powiększenia. Przykład? Biorąc pod uwagę, że max-zoomwartość arkusza stylów UA wynosi 5.0i initial-widthjest 320px, <meta name="viewport" content="width=10">zostanie rozwiązana do początkowej rzeczywistej szerokości 64px. Ma to sens, ponieważ jeśli urządzenie ma tylko 320px i może być powiększone 5xtylko normalną wartość, wówczas minimalny rozmiar rzutni wynosiłby 320px divided by 5, co oznacza pokazywanie tylko 64px na raz ( a nie 10pxponieważ wymagałoby to powiększenia 32x!). Ta wartość zostanie wykorzystana przez algorytm do określenia, jak rozszerzyć (zmienić) wartości min-widthi max-width, które będą odgrywać rolę w określaniu rzeczywistej szerokości rzutni.

Kładąc wszystko razem

Czym właściwie jest różnica między <meta name="viewport" content="width=device-width, initial-scale=1.0">i <meta name="viewport" content="initial-scale=1.0">? Po prostu powtórz kroki algorytmu ( to i to ). Zróbmy widthnajpierw ten drugi (ten bez atrybutu). (Zakładamy, że initial-widthrzutnia jest 640px).

• widthnie jest ustawione, powoduje max-widthi min-widthbędące extend-to-zoomw @viewportregule.
• initial-scalejest 1.0. Oznacza to, że zoomwartość jest również1.0
• Chodźmy postanowienieextend-to-zoom . Kroki:
  1. extend-zoom = MIN(zoom, max-zoom). MINOperacja postanawia wartości, która nie ma charakteru auto. Tutaj zoomjest 1.0i max-zoomjest auto. Oznacza to, że tak extend-zoomjest1.0
  2. extend-width = initial-width / extend-zoom. To jest łatwe; podziel 640 przez 1. Otrzymasz extend-widthjest równy640
  3. Ponieważ extend-zoomnie jest auto, przejdziemy do drugiego warunku. max-widthoznacza extend-to-zoomto, że max-widthzostanie to ustawione extend-width. A zatem,max-width = 640
  4. min-widthoznacza to również extend-to-zoomustawienie min-widthna max-width. Dostajemymin-width = 640
• Po rozwiązaniu wartości innych niżauto (tj. extend-to-zoom) Dla max-widthi min-width. Możemy przejść do następnej procedury . Bo min-widthalbo max-widthnie autoużyjemy pierwszy ifw postępowaniu, a tym samym ustawienie początkowe rzeczywistą rzutnię widthdo MAX(min-width, MIN(max-width, initial-width)), co równa się MAX(640, MIN(640, 640)). Rozwiązuje to 640dla początkowej rzeczywistej rzutniwidth
• Przejdź do następnej procedury . W tym kroku widthnie jest auto. Wartość ta nie ulegnie zmianie, a my w końcu z aktualnej rzutni widthz640px

Zróbmy to pierwsze.

• widthjest ustawiony, skutkuje to max-widthjest 100%( 640pxw naszym przypadku) i min-widthbędąc extend-to-zoomw @viewportregule.
• initial-scalejest 1.0. Oznacza to, że zoomwartość jest również1.0
• Chodźmy postanowienieextend-to-zoom . Jeśli wykonaj kroki ostrożnie (prawie taki sam jak wyżej), skończy się z max-widthod 640pxi min-widthod 640px.
• Prawdopodobnie możesz teraz zobaczyć wzór. Otrzymamy rzeczywistą szerokość rzutni wynoszącą 640px.

Jaka jest postrzegana różnica? Zasadniczo żaden . Obaj robią to samo. Mam nadzieję, że moje wyjaśnienie pomoże ;-) Jeśli coś było nie tak, powiedz mi.