W listopadzie w Chrome 108 wprowadziliśmy pewne zmiany w sposobie działania widocznego obszaru układu po wyświetleniu klawiatury ekranowej (OSK). Dzięki tej zmianie Chrome na Androidzie nie będzie już zmieniać rozmiaru widocznego obszaru układu, a jedynie zmienić rozmiar widocznego obszaru. Dzięki temu Chrome na Androidzie będzie działać na równi z przeglądarką Chrome na iOS i Safari na iOS.
Oto kilka ogólnych informacji o tym, dlaczego wprowadzamy te zmiany w Chrome i jak możesz się na to przygotować.
Widoczny obszar układu i widoczny obszar
Podczas odwiedzania witryny nie widać jej całej zawartości po jej wczytaniu. Zamiast tego przeglądarka oferuje widoczny obszar, w którym można zobaczyć fragment strony. Jest on też nazywany widocznym obszarem układu. Gdy treść strony staje się za duża, przeglądarka udostępnia mechanizm przewijania.
Podczas pozycjonowania elementów za pomocą narzędzia position: fixed są one układane względem tego widocznego obszaru układu. Podczas przewijania strony w dół widoczny obszar układu pozostanie na swoim miejscu, więc będą też widoczne elementy, które korzystają z pola position: fixed.
position: fixed (niebieskie pola). Wyświetlane są (od lewej) Safari na iPhonie, Chrome na Androidzie i Firefox na Androidzie.
Oprócz widocznego obszaru układu przeglądarka udostępnia też widoczny obszar. Reprezentuje ona obecnie widoczną część widocznego obszaru. Przy powiększeniu 1 ten widoczny obszar wizualny jest taki sam jak obszar układu.
Powiększanie palcami zmniejsza rozmiar widocznego obszaru w stosunku do widocznego obszaru układu.
Sposób zmiany rozmiaru widocznego obszaru
Gdy zaznaczasz dane wejściowe lub inny obszar edytowalny, na urządzeniach – głównie z ekranem dotykowym – może wyświetlać się klawiatura ekranowa. Ta klawiatura, często nazywana klawiaturą wirtualną,umożliwia użytkownikom wpisywanie treści w obszarze edycji.
Dzięki temu przeglądarki reagują na różne widoczne obszary w jeden z tych sposobów:
- Zmień rozmiar tylko widocznego obszaru wizualnego i odsuń widoczny obszar układu.
- Zmień rozmiar widocznego obszaru i układu.
- Nie zmieniaj rozmiaru żadnego z widocznych obszarów układu ani obszaru wizualnego – nakładaj na nie klawiaturę wirtualną.
Te 3 zachowania są przedstawione w ten sposób:
W zależności od kombinacji przeglądarki i systemu operacyjnego, z której korzysta użytkownik, stosowane jest jedno z działań, na które nie masz wpływu.
Mapowanie różnych zachowań zmiany rozmiaru
W ramach badania widoczności widocznego obszaru w ramach Interop z 2022 roku badaliśmy różne aspekty związane z widocznymi obszarami w przypadku każdej głównej kombinacji przeglądarki i systemu operacyjnego.
Jednym z testowanych aspektów jest zmiana rozmiaru, gdy wyświetlany jest panel OSK. Doprowadziło to do takiej klasyfikacji:
Pierwsza grupa
Przeglądarki, które zmieniają rozmiar widocznego obszaru, pozostawiając widoczny obszar bez zmian.
- Safari na iOS
- Safari na iPadOS
- Chrome w systemie operacyjnym Chrome
- Chrome na system iOS
- Chrome na iPadOS
- Edge w systemie iOS
- Edge w systemie iPadOS
Grupa 2
Przeglądarki, które zmieniają zarówno widoczny obszar wizualny, jak i widoczny układ.
- Chrome na Androida
- Firefox na Androidzie
- Edge na Androidzie
- Firefox na iOS
Grupa 3
Przeglądarki, które nie zmieniają rozmiaru żadnego widocznego obszaru:
- Domyślnie żadne – w Chrome na Androidzie możesz zezwolić na takie działanie za pomocą interfejsu VirtualKeyboard API
Efekty uboczne każdego zachowania
Ta różnica w sposobie zmiany rozmiaru poszczególnych widocznych obszarów przy wyświetlaniu OSK prowadzi do nieinteroperacyjnego układu i rozmiaru stron internetowych.
W przeglądarkach z grupy 1, gdzie wyświetlany jest OSK:
- Obliczone wartości jednostek związanych z widocznym obszarem pozostają bez zmian.
- Elementy, które zostały zaprojektowane tak, aby zajmowały całą przestrzeń wizualną, zachowują swój rozmiar.
- Elementy, w których występuje właściwość
position: fixed, pozostają na swoim miejscu i mogą być zasłonięte przez OSK.
W przeglądarkach z grupy 2, gdzie wyświetlany jest OSK:
- Obliczone wartości jednostek związanych z widocznym obszarem zmniejszają się.
- Elementy, które zostały zaprojektowane tak, aby zajmowały pełną przestrzeń wizualną, kurczą się.
- Elementy, które używają parametru
position: fixed, mogą znaleźć się w innym miejscu układu.
position: fixed (niebieskie pola). Widoczne są przeglądarki Safari na urządzeniach z iOS (po lewej) i Chrome na urządzeniach z Androidem (na środku i po prawej).
Jeśli nie zdecydujesz się na przechwytywanie klienta użytkownika lub polegasz na intensywnych skryptach, nie będzie wiadomo, które zachowanie jest używane. Nie możesz też zmienić działania, ponieważ zależy to od kombinacji przeglądarki i systemu operacyjnego, z której korzysta użytkownik.
Zmiana domyślnego działania w Chrome 108
Od wersji Chrome 108 Chrome na Androidzie będzie dostosowywać zmianę rozmiaru widocznego obszaru, aby nie zmieniała rozmiaru widocznego obszaru układu, gdy widoczna jest klawiatura ekranowa.
W ten sposób dopasujesz działanie Chrome na Androida do tego w Chrome na iOS, iPadOS, Windows i CrOS, Safari na iOS i iPadOS oraz Edge na iOS, iPadOS i Windows.
Dzięki tej zmianie autorzy wiedzą, jakie zachowanie będzie stosowane niezależnie od tego, jaki system operacyjny Chrome będzie działać. Umożliwia też stosowanie stabilnych jednostek zależnych od widocznego obszaru: wyświetlanie lub ukrywanie OSK nie ma na nie wpływu.
Wyrażanie zgody na inne działanie
Jeśli chcesz, aby Twoja witryna korzystała z funkcji zmiany rozmiaru starszych niż 108, nie przejmuj się. Jest to też rozszerzenie metatagu widocznego obszaru w Chrome 108.
Za pomocą klawisza interactive-widget możesz określić Chrome, którego rozmiaru chcesz zmienić.
Akceptowane wartości dla interactive-widget to:
resizes-visual: zmień rozmiar tylko widocznego obszaru, ale nie obszaru układu.resizes-content: zmień rozmiar widocznego obszaru i układu.overlays-content: nie zmieniaj rozmiaru widocznego obszaru.
Aby ponownie włączyć starsze działanie Chrome na urządzeniach z Androidem, ustaw metatag widocznego obszaru na taki:
<meta name="viewport" content="width=device-width, initial-scale=1.0, interactive-widget=resizes-content">
Jeśli nie umieścisz parametru interactive-widget w metatagu widocznego obszaru, Chrome użyje działania domyślnego, czyli resizes-visual.
Zwizualizowane ustawienia mają ten wpływ na różne widoczne obszary:
resizes-visual, resizes-content i overlays-content.
Efekt każdej wartości w przeglądarce możesz wypróbować na tej stronie demonstracyjnej.
Testowanie i opinie
Spodziewamy się pewnych drobnych różnic w stosunku do istniejących witryn, ale spodziewamy się, że nie będą one blokujące, ponieważ Chrome 108 na Androidzie będzie teraz działać podobnie do Safari na iOS. Dlatego strony, które działają dobrze w Safari na iOS, powinny też działać poprawnie w Chrome 108 na Androidzie.
Zachęcamy jednak autorów witryn, aby aktywnie testowali swoje witryny w Chrome 108 (dostępnej od 27 października 2022 r. w wersji beta). Zwróć szczególną uwagę na elementy, które korzystają z position: fixed lub korzystają z jednostek zależnych od widocznego obszaru.
Opinie można zgłaszać na stronie crbug.com. Pamiętaj, aby w tytule zgłoszenia dodać słowo „klawiatura ekranowa”.