Różnica między Visual viewport a layout viewport?
Jaka jest różnica między visual viewport a layout viewport dla urządzenia mobilnego, takiego jak iPhone/iPad?
Przejrzałem wiele zasobów internetowych, ale nadal nie jestem tego pewien.
3 answers
Visual viewport jest częścią strony, która jest aktualnie wyświetlana na ekranie.
Widok układu może być znacznie szerszy niż widok układu i zawiera elementy, które pojawiają się lub nie pojawiają się na ekranie.
Wyobraź sobie widok układu jako duży obraz, który nie zmienia rozmiaru ani kształtu. Teraz wyobraź sobie, że masz mniejszą klatkę, przez którą patrzysz na duży obraz. Mała ramka otoczona jest nieprzezroczystym materiałem, który zasłania widok na wszystkie ale część dużego obrazu. Część dużego obrazu, którą można zobaczyć przez ramkę, to Visual viewport. Możesz cofnąć się od dużego obrazu, trzymając klatkę (pomniejsz), aby zobaczyć cały obraz naraz, lub możesz zbliżyć się (powiększyć), aby zobaczyć tylko część. Można również zmienić orientację ramki, ale rozmiar i kształt dużego obrazu (widok układu) nigdy się nie zmienia.
Aby dobrze potraktować problem, zobacz: http://www.quirksmode.org/mobile/viewports2.html
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-02-14 06:03:05
Bardzo dobre wyjaśnienie tych dwóch znajdujeProszę..
W podsumowaniu:
Visual viewport
Visual viewport jest częścią strony, która jest aktualnie wyświetlana na ekranie. Użytkownik może przewijać, aby zmienić część strony, którą widzi, lub powiększać, aby zmienić rozmiar widoku wizualnego.
Layout viewport
Jednak układ CSS, zwłaszcza procentowe szerokości, są obliczane względem układu viewport, który jest znacznie szerszy niż Visual viewport.
Tak więc element początkowo przyjmuje szerokość widoku układu, a Twój CSS jest interpretowany tak, jakby ekran był znacznie szerszy niż ekran telefonu. Dzięki temu układ witryny zachowuje się tak, jak w przeglądarce komputerowej.
Jak szeroki jest widok układu? To różni się w zależności od przeglądarki. Safari iPhone używa 980px, Opera 850px, Android WebKit 800px i IE 974PX.
W skrócie, układ viewport to zazwyczaj szerokość viewportu, gdy ekran jest powiększony do końca.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-06-20 09:12:55
Layout viewport
Jego pomiary są zawsze takie same niezależnie od orientacji lub poziomu powiększenia, tylko zależy od urządzenia / okna przeglądarki.
Visual viewport
Jest różna (np. przy powiększeniu). Jest to część strony, która jest faktycznie wyświetlana na ekranie w danym momencie.
Przykład wideo obu układów
Widok układu: zielony obszar na minimapie.
Visual viewport: The red box in the minimapka.
Layout viewport vs visual viewport (video)
Na urządzeniach mobilnych / tabletach
Na urządzeniach mobilnych, rzeczy mogą być nieco bardziej skomplikowane domyślnie, ponieważ w celu umożliwienia" full web " doświadczenie, wiele urządzeń mobilnych zwraca fałszywy wyższy layout viewport Wymiary.
Na przykład klasyczny iPhone domyślnie wyświetla widok układu o szerokości 980px. Oznacza to, że jeśli utworzysz element 320px na iPhone, zapełni tylko około jednej trzeciej powierzchni ekranu.
Jednak ten mechanizm nie jest tak dobry dla stron, które są zoptymalizowane pod kątem wąskich ekranów za pomocą zapytań o media.
Podczas tworzenia responsywnych stron internetowych bardzo przydatny jest meta tag viewport, który pozwala nam kontrolować skalowanie i układ viewport wielu urządzeń(używając rzeczywistych wymiarów, a nie fałszywych zgłoszonych).
<meta name="*viewport*" content="*width=device-width*, initial-scale=1, maximum-scale=1" />
Przykłady znaczników meta viewport
Wskazówka: jeśli przeglądasz tę stronę za pomocą telefonu lub tabletu, możesz kliknij na dwa linki poniżej, aby zobaczyć różnicę.
Bez znacznika meta viewportz znacznikiem meta viewport
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-10-19 18:13:25