W listopadzie, wraz z wydaniem Chrome 108, wprowadzimy zmiany w zachowaniu układu widoku, gdy wyświetla się 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 Androidzie będzie takie samo jak w przypadku Chrome na iOS i Safari na iOS.
Oto ogólne informacje o tym, co się dzieje, dlaczego wprowadzamy te zmiany w Chrome i jak możesz się do nich 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.
Powiększanie przez ściąganie palców powoduje zmniejszenie rozmiaru widocznego obszaru w stosunku do widocznego obszaru układu.
Sposób zmiany rozmiaru widocznego obszaru
Podczas zaznaczania tekstu lub innego obszaru z możliwością edycji urządzenia – najczęściej z ekranem dotykowym – mogą wyświetlać 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:
- Możesz zmienić rozmiar tylko widocznego obszaru i odsunąć widoczny obszar układu.
- Zmień rozmiar widocznego obszaru i widocznego obszaru układu.
- Nie zmieniaj rozmiaru widocznego obszaru w układzie ani widocznego obszaru wizualnego, nakładając klawiaturę wirtualną na oba te obszary.
Te 3 zachowania można zobrazować 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 przetestowanych aspektów jest zmiana rozmiaru podczas wyświetlania kodu OSK. 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 na 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 Androidzie możesz włączyć takie zachowanie za pomocą interfejsu VirtualKlawiatura API.
Skutki uboczne poszczególnych zachowań
Ta różnica w sposobie, w jaki zmienia się rozmiar poszczególnych widocznych obszarów podczas wyświetlania elementu OSK, powoduje brak interoperacyjności z układem strony i określaniem rozmiarów.
W przeglądarkach z grupy 1 z widocznym systemem operacyjnym:
- Obliczone wartości jednostek względnych do widoku pozostają bez zmian.
- Elementy, które zostały zaprojektowane tak, aby zajmować 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 zależnych od widocznego obszaru kurczą się.
- Elementy, które zostały zaprojektowane tak, aby zajmować całą przestrzeń wizualną, się kurczą.
- Elementy, które używają
position: fixed, mogą znaleźć się w innym miejscu układu.
position: fixed (niebieskie pola). Widoczne są Safari na iOS (po lewej) oraz Chrome na Androidzie (na środku i po prawej).
Jeśli nie zastosujesz wykrywania zdarzeń User-Agent lub nie korzystasz z zaawansowanych skryptów, nie możesz wiedzieć, jakie zachowanie zostało zastosowane. 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.
W ten sposób dopasujesz działanie Chrome na Androidzie oraz Chrome na iOS, iPadOS, Windows i CrOS, 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.
Wyrażanie zgody na inne działanie
Jeśli chcesz, aby Twoja witryna używała zachowania zmiany 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ć, jakiego zachowania rozmiaru chcesz użyć w Chrome.
Akceptowane wartości interactive-widget:
resizes-visual: zmień rozmiar tylko wizualnego widocznego obszaru, a nie układu widocznego obszaru.resizes-content: zmień rozmiar zarówno widocznego obszaru, jak i obszaru układu.overlays-content: nie zmieniaj rozmiaru 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 umieścisz atrybutu interactive-widget w metatagu widocznego obszaru, Chrome użyje działania domyślnego, 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 z tych wartości możesz wypróbować w przeglądarce na tej stronie demonstracyjnej.
Testowanie i opinie
Spodziewamy się niewielkich różnic w stosunku do istniejących witryn, jednak nie będzie to blokowanie ich, ponieważ Chrome 108 na Androida będzie teraz działać podobnie jak 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 twórców witryn do aktywnego testowania wersji Chrome 108, która od 27 października 2022 r. będzie w wersji beta. Zwróć szczególną uwagę na elementy, które używają parametru position: fixed lub opierają się na jednostkach zależnych od widocznego obszaru.
Opinie można zgłaszać na stronie crbug.com. Pamiętaj, aby w tytule zgłoszenia umieścić tekst „klawiatura ekranowa”.