Kasım ayında, Chrome 108'in yayınlanmasıyla birlikte Chrome, dokunmatik klavye (OSK) gösterildiğinde düzen görüntü 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 ve bunun yerine 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ı olacak.
Neler olduğu, Chrome'un bu değişikliği neden yaptığı ve hazırlanmak için neler yapabileceğiniz hakkında bilgi edinin.
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 fazla büyüdüğünde tarayıcı, kaydırma mekanizması sunar.
position: fixed kullanılarak konumlandırılan öğeler, bu düzen görüntü alanına göre düzenlenir. Sayfada aşağı kaydırırken düzen görüntü alanı yerinde kalır. position: fixed kullanan öğeler de aynı şekilde yerinde kalır.
position: fixed (mavi kutular) kullanılarak yerleştirilmiş iki öğe içeren düzen görüntüleme alanı (mavi anahat) görselleştirmesi. Resimlerde (soldan sağa) 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 şu 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 parmak ucunu yakınlaştırmak için yakınlaştırdığınızda Görsel Görüntü Alanı'nın boyutunu, Düzen Görüntü Alanı'na göre küçültmüş olursunuz.
Görüntü alanını yeniden boyutlandırma davranışı
Cihazlar (çoğunlukla dokunmatik ekranlı cihazlar), bir girişe veya başka bir düzenlenebilir alana odaklanıldığında ekran klavyesi gösterebilir. Genellikle sanal klavye olarak adlandırılan bu klavye, kullanıcıların düzenlenebilir alana içerik girmelerine olanak tanır.
Tarayıcılar bu işlemi yaparken çeşitli görüntü alanlarıyla ilgili olarak aşağıdaki yöntemlerden biriyle 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 ikisinin de üzerine yerleştirmeyin.
Bu üç davranış aşağıdaki gibi görselleştirilir:
Ziyaretçinin kullandığı tarayıcı ve işletim sistemi kombinasyonuna bağlı olarak, kontrolünüz dışında davranışlardan biri kullanılır.
Çeşitli yeniden boyutlandırma davranışlarını eşleme
Interop 2022 kapsamındaki Görüntü Alanı İnceleme Çalışması'nda, her büyük tarayıcı ve işletim sistemi kombinasyonu için görüntü alanıyla ilgili çeşitli yönler incelendi.
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ıran ancak düzen görüntü alanını değiştirmeyen tarayıcılar.
- iOS'te Safari
- iPadOS'te Safari
- Chrome OS'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ından 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
OSK gösterildiğinde çeşitli görüntü alanlarının yeniden boyutlandırılma biçimindeki bu fark, web sitelerinin birlikte çalışamayan bir düzen ve boyutlandırma davranışına yol açar.
1. gruptaki tarayıcılarda OSK gösterilir:
- Görüntüleme alanına göre birimler için hesaplanan değerler aynı kalır.
- Görsel alanın tamamını kaplayacak şekilde tasarlanmış öğeler boyutlarını korur.
position: fixedkullanan öğeler yerinde kalır ve OSK tarafından gizlenebilir.
2. grup'taki tarayıcılarda OSK gösterilirken:
- Görüntüleme alanına göre birimler için hesaplanan değerler küçülür.
- Görsel alanın tamamını kaplayacak şekilde tasarlanmış öğeler küçülür.
position: fixedkullanan öğeler, düzenin başka bir yerinde görünebilir.
position: fixed (mavi kutular) kullanan öğelerin farklı konumlarına dikkat edin. iOS'teki Safari (solda) ve Android'deki Chrome (ortada ve sağda) gösterilmektedir.
Kullanıcı aracısı koku alma işlemine başvurmadığınız veya kapsamlı komut dosyası kullanmadığınız sürece hangi davranışın kullanıldığını bilemezsiniz. Ayrıca, kullanıcının ziyaret ettiği tarayıcı ve işletim sistemi kombinasyonuna göre belirlendiği için bu davranışı da değiştiremezsiniz.
Chrome 108'de varsayılan davranışı değiştirme
Chrome 108'den itibaren Android'deki Chrome, görüntü alanı yeniden boyutlandırma davranışını düzenleyecek ve dokunmatik klavye gösterildiğinde düzen görüntü alanını yeniden boyutlandırmayacaktır.
Bu işlem, Android'deki Chrome'un davranışını iOS, iPadOS, Windows ve CrOS'teki Chrome, iOS ve iPadOS'teki Safari ve iOS, iPadOS ve Windows'taki Edge ile uyumlu hale getirir.
Bu değişiklik sayesinde yazarlar, Chrome'un hangi işletim sisteminde çalıştığına bakılmaksızın hangi davranışın kullanılacağını bilebilir. Ayrıca, görüntü alanına göre sabit birimler sağlar: OSK'nin gösterilmesi veya gizlenmesi bu birimleri etkilemez.
Farklı bir davranışı etkinleştirme
Web sitenizin 108 öncesi yeniden boyutlandırma davranışını kullanmasını istiyorsanız endişelenmeyin. Chrome 108'de kullanıma sunulan görüntü alanı meta etiketi de bu kapsamdadır.
interactive-widget tuşunu kullanarak Chrome'a hangi yeniden boyutlandırma davranışını istediğinizi bildirebilirsiniz.
interactive-widget için kabul edilen değerler şunlardır:
resizes-visual: Yalnızca Görsel Görüntü Alanı'nı yeniden boyutlandırın, Düzen Görüntü Alanı'nı yeniden boyutlandırmayın.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: Görüntü alanlarını yeniden boyutlandırmayın.
Android'deki "eski" Chrome davranışını yeniden etkinleştirmek için ekran alanı meta etiketini şu şekilde ayarlayın:
<meta name="viewport" content="width=device-width, initial-scale=1.0, interactive-widget=resizes-content">
Görünüm alanı meta etiketine interactive-widget eklemezseniz Chrome, varsayılan davranışı (resizes-visual) kullanır.
Görselleştirilmiş olarak, ayarların çeşitli görüntüleme alanlarında şu etkileri vardır:
resizes-visual, resizes-content ve overlays-content.
Her bir değerin tarayıcınızdaki etkisini bu demo web sitesinde deneyebilirsiniz.
Test ve geri bildirim
Mevcut sitelerde bazı küçük farklılıklar görebiliriz ancak Android'deki Chrome 108 artık iOS'teki Safari'ye benzer şekilde davranacağından bu farklılıkların sayfayı engellemeyeceğini tahmin ediyoruz. Bu nedenle, iOS'teki Safari'de sorunsuz çalışan web siteleri Android'deki Chrome 108'de de sorunsuz çalışmalıdır.
Ancak web sitesi yazarlarını, web sitelerini 27 Ekim 2022'den itibaren beta sürümünde olan Chrome 108'de aktif olarak test etmeye teşvik ediyoruz. Özellikle position: fixed kullanan ve/veya Görüntüleme alanına göre birimler kullanan öğelere dikkat edin.
Geri bildirimlerinizi crbug.com adresinden bildirebilirsiniz. Raporun başlığına "ekran klavyesi" ifadesini eklediğinizden emin olun.