Kasım ayında Chrome 108'in kullanıma sunulmasıyla birlikte Chrome, dokunmatik klavye (OSK) gösterildiğinde düzen görüntüleme alanının davranışında bazı değişiklikler yapacak. Bu değişiklikle birlikte, Android'deki Chrome artık düzen görüntü alanını yeniden boyutlandırmayacak, yalnızca görsel görüntü alanını yeniden boyutlandıracak. Bu sayede Android'de Chrome'un davranışı, iOS'te Chrome ve iOS'te Safari ile aynı seviyeye getirilecek.
Neler olduğu, Chrome'un bu değişikliği neden yaptığı ve hazırlanmak için neler yapabileceğiniz hakkında bazı bilgileri aşağıda bulabilirsiniz.
Düzen görüntü alanı ve görsel görüntü alanı
Bir web sitesini ziyaret ettiğinizde, sayfa yüklendikten sonra sayfa içeriğinin tamamını göremezsiniz. Bunun yerine tarayıcı, sayfanın bir bölümünü görebileceğiniz bir görüntü alanı sunar. Bu görüntü alanı, düzen görüntü alanı olarak da bilinir. Bir sayfanın içeriği çok büyük olduğunda tarayıcı bir kaydırma mekanizması sunar.
Öğeler position: fixed kullanılarak konumlandırıldığında, bu öğeler söz konusu düzen görüntü alanına göre yerleştirilir. Sayfayı aşağı kaydırdığınızda düzen görüntüleme alanı yerinde kaldığından position: fixed kullanan öğeler de yerinde kalır.
position: fixed (mavi kutular) kullanılarak düzenlenmiş iki öğe bulunur. Soldan sağa doğru iPhone'da Safari, Android'de Chrome ve Android'de Firefox gösterilmektedir.
Tarayıcı, bu düzen görüntü alanına ek olarak bir görsel görüntü alanı da sunar. Görüntü alanının o anda görünür olan kısmını temsil eder. 1 yakınlaştırma seviyesinde bu görsel görüntü alanı, düzen görüntü alanı kadar büyüktür.
İki parmakla yakınlaştırma yaptığınızda görsel görüntü alanının boyutunu, düzen görüntü alanına göre küçültürsünüz.
Görüntü alanını yeniden boyutlandırma davranışı
Bir girişe veya düzenlenebilir başka bir alana odaklanıldığında cihazlar (çoğunlukla dokunmatik ekranlı cihazlar) dokunmatik klavye gösterebilir. Genellikle sanal klavye olarak adlandırılan bu klavye, kullanıcıların düzenlenebilir alana içerik girmesine olanak tanır.
Bu işlem sırasında tarayıcılar, çeşitli görüntü alanlarıyla ilgili olarak aşağıdaki şekillerde yanıt verir:
- Yalnızca görsel görüntü alanını yeniden boyutlandırın ve düzen görüntü alanını kaydırın.
- Hem görsel görüntü alanını hem de düzen görüntü alanını yeniden boyutlandırın.
- Düzen görüntü alanını veya görsel görüntü alanını yeniden boyutlandırmayın. Sanal klavyeyi her ikisinin üzerine yerleştirin.
Bu üç davranış şu şekilde görselleştirilir:
Ziyaretçinin kullandığı tarayıcı ve işletim sistemi kombinasyonuna bağlı olarak, kontrolünüz dışında bu davranışlardan biri kullanılır.
Çeşitli yeniden boyutlandırma davranışlarını eşleme
Interop 2022'nin Görüntü Alanı İnceleme Çalışması bölümünde, her büyük tarayıcı ve OS kombinasyonu için görüntü alanıyla ilgili çeşitli özellikler incelenmiştir.
Test edilen özelliklerden biri, OSK gösterildiğinde yeniden boyutlandırma davranışıdır. Bu durum, aşağıdaki sınıflandırmaya yol açtı:
Birinci grup
Görsel görüntü alanını yeniden boyutlandırıp düzen görüntü alanını değiştirmeyen tarayıcılar.
- iOS'te Safari
- iPadOS'te Safari
- ChromeOS'te Chrome
- iOS'ta Chrome
- iPadOS'te Chrome
- iOS'te Edge
- iPadOS'te Edge
İkinci grup
Hem görsel görüntü alanını hem de düzen görüntü alanını yeniden boyutlandıran tarayıcılar.
- Android cihazda Chrome
- Android'de Firefox
- Android'de Edge
- iOS'te Firefox
Üçüncü grup
Görüntü alanlarının hiçbirini yeniden boyutlandırmayan tarayıcılar:
- Varsayılan olarak yok: Android'de Chrome'da VirtualKeyboard API aracılığıyla bu davranışı etkinleştirebilirsiniz.
Her davranışın yan etkileri
Sanal klavye gösterildiğinde çeşitli görüntü alanlarının yeniden boyutlandırılma şeklindeki bu fark, web sitelerinin birlikte çalışamayan bir düzene ve boyutlandırma davranışına sahip olmasına neden olur.
1. gruptaki tarayıcılarda, OSK gösterilirken:
- Görüntü alanına göre birimler için hesaplanan değerler aynı kalır.
- Görsel alanın tamamını kaplayacak şekilde tasarlanan öğeler boyutlarını korur.
position: fixedkullanan öğeler yerinde kalır ve OSK tarafından gizlenebilir.
2. gruptaki tarayıcılarda, OSK gösterilirken:
- Görüntü alanına göre birimler için hesaplanan değerler küçülür.
- Görsel alanın tamamını kaplayacak şekilde tasarlanan öğeler küçülür.
position: fixedkullanan öğeler, düzende başka bir yerde görünebilir.
position: fixed (mavi kutular) kullanan öğelerin farklı konumlarına dikkat edin. iOS'te Safari (sol) ve Android'de Chrome (orta ve sağ) gösterilmektedir.
Kullanıcı Aracısı algılama yöntemini kullanmıyorsanız veya kapsamlı komut dosyası oluşturma işleminden yararlanmıyorsanız hangi davranışın kullanıldığını bilemezsiniz. Ayrıca, kullanıcının ziyaret ettiği tarayıcı ve işletim sistemi kombinasyonu tarafından belirlendiği için davranışı değiştiremezsiniz.
Chrome 108'de varsayılan davranışı değiştirme
Chrome 108'den itibaren Android'de Chrome, görüntü alanı yeniden boyutlandırma davranışını, dokunmatik klavye gösterildiğinde düzen görüntü alanını yeniden boyutlandırmayacak şekilde ayarlayacak.
Bu sayede Android'de Chrome'un davranışı; iOS, iPadOS, Windows ve CrOS'te Chrome'un, iOS ve iPadOS'te Safari'nin ve iOS, iPadOS ve Windows'da Edge'in davranışıyla uyumlu hale gelecek.
Bu değişiklik sayesinde yazarlar, Chrome'un hangi işletim sisteminde çalıştığından bağımsız olarak hangi davranışın kullanılacağını bilebilir. Ayrıca, görüntü alanına göre kararlı birimler sağlar: OSK'nin gösterilmesi veya gizlenmesi bu birimleri etkilemez.
Farklı bir davranışı etkinleştirme
Web sitenizin 108 sürümünden önceki yeniden boyutlandırma davranışını kullanmasını istiyorsanız endişelenmeyin. Chrome 108'de görüntü alanı meta etiketi için bir uzantı da kullanıma sunuluyor.
interactive-widget anahtarı aracılığıyla Chrome'a hangi yeniden boyutlandırma davranışını istediğinizi söyleyebilirsiniz.
interactive-widget için kabul edilen değerler:
resizes-visual: Düzen görüntü alanını değil, yalnızca görsel görüntü alanını yeniden boyutlandırır.resizes-content: Hem görsel görüntü alanını hem de düzen görüntü alanını yeniden boyutlandırın.overlays-content: Hiçbir görüntü alanını yeniden boyutlandırmayın.
Android'de Chrome'un "eski" davranışını tekrar etkinleştirmek için görüntü alanı meta etiketini şu şekilde ayarlayın:
<meta name="viewport" content="width=device-width, initial-scale=1.0, interactive-widget=resizes-content">
Görüntü alanı meta etiketine interactive-widget eklemezseniz Chrome, varsayılan davranış olan resizes-visual değerini kullanır.
Görselleştirildiğinde, ayarların çeşitli görüntü alanları üzerinde şu etkisi olur:
resizes-visual, resizes-content ve overlays-content.
Bu demo web sitesinde her bir değerin tarayıcınızdaki etkisini deneyebilirsiniz.
Test ve geri bildirim
Mevcut sitelerde bazı küçük farklılıklar olmasını bekliyoruz ancak Android'deki Chrome 108 artık iOS'teki Safari'ye benzer şekilde davranacağından bunların engelleyici olmayacağını düşünüyoruz. Bu nedenle, iOS'te Safari'de sorunsuz çalışan web siteleri, Android'de Chrome 108'de de sorunsuz çalışmalıdır.
Ancak web sitesi yazarlarını, 27 Ekim 2022'den itibaren beta sürümünde olan Chrome 108'de web sitelerini etkin bir şekilde test etmeye teşvik ediyoruz. Özellikle position: fixed kullanan ve/veya görüntü alanına göreli birimlere dayanan öğelere dikkat edin.
Geri bildirimlerinizi crbug.com adresinden bildirebilirsiniz. Raporun başlığına "dokunmatik klavye" ifadesini eklemeyi unutmayın.