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 @viewport
tł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
width
iheight
rzutni<META>
są tłumaczone nawidth
iheight
deskryptory, ustawiając wartośćmin-width
/ namin-height
wartośćextend-to-zoom
imax-width
/max-height
na 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; }
width
Deskryptor skrótem opisany jest jako:
Jest to skrótowy deskryptor do ustawiania zarówno
min-width
imax-width
. Jedna<viewport-length>
wartość ustawi zarówno tę wartość, jakmin-width
imax-width
tę. Dwie<viewport-length>
wartości zostaną ustawionemin-width
na pierwszą imax-width
na 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 100vw
część. W sekcji 10.4 wyjaśniają:
device-width
idevice-height
przetłumacz odpowiednio na 100vw i 100vh
W ten sposób możemy wreszcie zobaczyć, w jaki sposób width=device-width
jest 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-zoom
wartość?
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.
1.0
, ale nie jestem tego pewien. W każdym razie świetna odpowiedź, dzięki!viewport
atrybutu tagu jest brak określeniainitial-scale
. Na przykład pisząc<meta name="viewport" content="360px">
, wiesz, że nie kontrolujesz początkowego poziomu powiększenia. Jako taki, po moich ograniczonych testach, styl UA zawsze kurczy się (poprzez pewną procedurę, która może nie być normatywna) rzutni. Jednak rzeczywista rzutnia zawsze pozostanie na szerokości360px
, niezależnie od początkowego rozmiaru rzutni.<meta name="viewport" content="360px", initial-scale=1.0>
, tworzysz wartośćmin-width
doextend-to-zoom
i łączysz zzoom
wartością, to zawsze rozwiąże największą wartość między początkową szerokością rzutni podzieloną przez wartość powiększenia amax-width
. W procedurze ograniczania (sekcja 7.2) zobaczysz, żewidth = MAX(min-width, MIN(max-width, initial-width))
. Z moich ograniczonych testów wywnioskowałem, że gdymax-width
określony jest mniejszy niż ...max-width
wartość jest większa niż początkowa szerokość rzutni, minimalną wartością będzie początkowa szerokość rzutni, a maksymalna wartość będzie, no cóż,max-width
wartością.extend-to-zoom
Semantycznie sensowne, ponieważextend-to-zoom
pomin-width
dosłownie rozszerza wartość szerokości rzutni gdy zoom jest1.0
. Jest to zgodne z powyższą odpowiedzią, któraextend-to-zoom
zmienia / rozszerza / powiększawidth
wartość przy danym poziomie powiększenia.initial-scale
atrybutu, ale jest to jeden ze sposobów na uzyskanie dostrzegalnej różnicy. Rewizja do mojego pierwszego komentarza, styl UA może również powiększać (nie tylko zmniejszać) rzutnię, gdy szerokość urządzenia jest większa niż 360px.