W listopadzie, wraz z wydaniem Chrome 108, wprowadzimy zmiany w zachowaniu układu widoku, gdy wyświetlana jest klawiatura ekranowa. W ramach tej zmiany Chrome na Androidzie nie będzie już zmieniać rozmiaru widocznego obszaru w układzie, tylko rozmiaru widocznego obszaru. Dzięki temu działanie Chrome na Androida będzie takie samo jak Chrome na iOS i Safari na iOS.
Poniżej znajdziesz informacje o tym, co się dzieje, dlaczego Chrome wprowadza tę zmianę i jak możesz się do niej przygotować.
Widzialny obszar i widoczny obszar układu
Podczas odwiedzania witryny nie widzisz całej zawartości strony po jej załadowaniu. Zamiast tego przeglądarka udostępnia widoczny obszar, w którym widzisz część strony. Taki widok nazywamy też widokiem układu. Gdy zawartość strony staje się zbyt duża, przeglądarka oferuje mechanizm przewijania.
Gdy elementy są pozycjonowane za pomocą atrybutu position: fixed, są one układane w ramach tej ramki układu. Podczas przewijania strony widoczny obszar układu pozostaje na swoim miejscu, podobnie jak elementy, które używają position: fixed.
position: fixed (niebieskie pola). Na ilustracji (od lewej do prawej) widać Safari na iPhonie, Chrome na Androidzie i Firefox na Androidzie.
Oprócz tego układu widoku przeglądarka oferuje też wizualny układ widoku. Wskazuje część widocznego obszaru. Przy poziomie powiększenia 1 ten Wizualny widoczny obszar jest tak duży jak Widzialny obszar układu.
Gdy używasz gestów, aby powiększyć obraz, zmniejszasz rozmiar Wizualnego Widocznego Obszaru w stosunku do Widocznego Obszaru Układu.
Zmiana rozmiaru widocznego obszaru
Gdy skupisz się na polu tekstowym lub innym obszarze do edycji, urządzenia – głównie urządzenia z ekranem dotykowym – mogą wyświetlić klawiaturę ekranową. Ta klawiatura, często nazywana klawiaturą wirtualną,umożliwia użytkownikom wprowadzanie treści w obszarze edytowalnym.
W zależności od różnych widoków przeglądarki reagują w jeden z tych sposobów:
- Zmień rozmiar tylko wizualnego widocznego obszaru i przesuń widoczny obszar w układzie.
- Zmień rozmiar zarówno widocznego, jak i układowego widocznego obszaru.
- Nie zmieniaj rozmiaru widocznego obszaru w układzie ani widocznego obszaru wizualnego, nakładając klawiaturę wirtualną na oba te obszary.
Te 3 zachowania są wizualizowane w ten sposób:
W zależności od przeglądarki i systemu operacyjnego używanego przez użytkownika, stosuje się jedno z tych zachowań, na które nie masz wpływu.
Mapowanie różnych zachowań związanych ze zmianą rozmiaru
W ramach badania obszaru widocznego w ramach Interop 2022 zbadano różne aspekty związane z obszarem widocznym w przypadku każdej kombinacji najpopularniejszych przeglądarek i systemów operacyjnych.
Jednym z testowanych aspektów jest zachowanie podczas zmiany rozmiaru podczas wyświetlania okna dialogowego. Doprowadziło to do takiej klasyfikacji:
Grupa 1
przeglądarki, które zmieniają rozmiar wizualnego widocznego obszaru, nie zmieniając widocznego obszaru w układzie;
- Safari na iOS
- Safari w iPadOS
- Chrome na ChromeOS
- Chrome na system iOS
- Chrome na iPadOS
- Edge na iOS
- Edge na iPadOS
Grupa 2
przeglądarki, które zmieniają rozmiar zarówno wizualnego, jak i układowego widocznego obszaru;
- Chrome na Androida
- Firefox na Androidzie
- Edge na Androidzie
- Firefox na iOS
Grupa 3
Przeglądarki, które nie zmieniają rozmiaru żadnego z widocznych obszarów:
- Domyślnie brak – w Chrome na Androida możesz włączyć tę funkcję za pomocą interfejsu VirtualKeyboard API.
Skutki uboczne poszczególnych zachowań
Ta różnica w sposobie zmiany rozmiaru różnych widocznych obszarów podczas wyświetlania okna modalnego prowadzi do nieinteroperacyjnego układu i zachowania rozmiarów witryn.
W przeglądarkach z grupy 1, w których wyświetla się OSK:
- Obliczone wartości jednostek względnych do widoku pozostają bez zmian.
- Elementy, które zostały zaprojektowane tak, aby zajmowały całą przestrzeń wizualną, zachowują swój rozmiar.
- Elementy, które używają
position: fixed, pozostają na swoich miejscach i mogą być zasłonięte przez OSK.
W przeglądarkach z grupy 2, w których wyświetla się klawiaturę ekranową:
- Obliczone wartości jednostek względnych do widoku się kurczą.
- Elementy, które zostały zaprojektowane tak, aby zajmować całą przestrzeń wizualną, się kurczą.
- Elementy, które używają
position: fixed, mogą się znaleźć w innym miejscu układu.
position: fixed (niebieskie pola). Na ilustracji widać Safari na iOS (po lewej) i Chrome na Androidzie (pośrodku i po prawej).
Jeśli nie użyjesz sniffera User-Agent ani nie skorzystasz z rozbudowanego skryptu, nie dowiesz się, które zachowanie jest używane. Nie możesz też zmienić zachowania, ponieważ zależy ono od przeglądarki i systemu operacyjnego, z którego korzysta użytkownik.
Zmiana domyślnego zachowania w Chrome 108
Od wersji 108 przeglądarki Chrome na Androidzie zachowanie zmiany rozmiaru widocznego obszaru zostanie zmienione, aby nie zmieniać rozmiaru widocznego obszaru w układzie, gdy wyświetlana jest klawiatura ekranowa.
Dzięki temu działanie Chrome na Androidzie będzie zgodne z działaniem Chrome na iOS, iPadOS, Windows i ChromeOS, Safari na iOS i iPadOS oraz Edge na iOS, iPadOS i Windows.
Dzięki tej zmianie autorzy mogą wiedzieć, jakie zachowanie będzie używane niezależnie od tego, na jakim systemie operacyjnym działa Chrome. Ponadto umożliwia stabilne jednostki względne do widoku: wyświetlanie lub ukrywanie klawiatury ekranowej nie ma wpływu na te jednostki.
Wybranie innego zachowania
Jeśli chcesz, aby Twoja witryna używała zachowania rozmiaru sprzed wersji 108, nie martw się. W Chrome 108 udostępniamy też rozszerzenie metatagu viewport.
Za pomocą klawisza interactive-widget możesz określić, jak Chrome ma zmieniać rozmiar.
Akceptowane wartości dla interactive-widget:
resizes-visual: zmień rozmiar tylko wizualnego widocznego obszaru, a nie układu.resizes-content: zmień rozmiar zarówno widocznego obszaru, jak i obszaru układu.overlays-content: nie zmieniaj rozmiaru żadnego widocznego obszaru.
Aby przywrócić „starszą” wersję Chrome na Androida, ustaw metatag viewport na:
<meta name="viewport" content="width=device-width, initial-scale=1.0, interactive-widget=resizes-content">
Jeśli nie podasz wartości interactive-widget w metatagu viewport, Chrome zastosuje zachowanie domyślne, czyli resizes-visual.
W ramach wizualizacji ustawienia mają taki wpływ na różne widoki:
resizes-visual, resizes-content i overlays-content.
Efekt każdej wartości możesz sprawdzić w przeglądarce na tej stronie demonstracyjnej.
Testowanie i opinie
Spodziewamy się pewnych drobnych różnic w dotychczasowych witrynach, ale nie powinny one blokować dostępu, ponieważ Chrome 108 na Androidzie będzie teraz działać podobnie do Safari na iOS. Dlatego strony, które działają prawidłowo w Safari na iOS, powinny też działać prawidłowo w Chrome 108 na Androida.
Zachęcamy jednak autorów stron internetowych do aktywnego testowania swoich witryn w Chrome 108, która od 27 października 2022 r. jest w wersji beta. Zwróć szczególną uwagę na elementy, które używają position: fixed lub korzystają z jednostek względnych do widoku.
Opinie można zgłaszać na stronie crbug.com. Pamiętaj, aby w tytule zgłoszenia umieścić tekst „klawiatura ekranowa”.