Kasım ayında Chrome 108'in kullanıma sunulmasıyla birlikte Chrome, dokunmatik klavye (OSK) gösterildiğinde Düzen Görünümü Alanı'nın davranışında bazı değişiklikler yapacaktır. Bu değişiklikle birlikte, Android üzerindeki Chrome artık Düzen Görünümü'nü yeniden boyutlandırmayacak, bunun yerine yalnızca Görsel Görünümü yeniden boyutlandıracaktır. 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ı bir 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 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 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ünümü yeniden boyutlandırarak Düzen Görünümü'ne dokunulmayan 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ünümü hem de Düzen Görünümü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'deki 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ü alanına bağlı birimler için hesaplanan değerler aynı kalır.
- Tüm görsel alanı kaplayacak şekilde tasarlanan öğelerin 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ı tamamen kaplayacak şekilde tasarlanan öğeler.
position: fixedkullanan öğeler, düzenin başka bir yerinde görünebilir.
position: fixed öğesini kullanan öğelerin farklı konumlarına dikkat edin (mavi kutular). iOS'te Safari (solda) ve Android'de Chrome (orta 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 değişiklik, Android'deki Chrome'un davranışını; iOS, iPadOS, Windows ve CrOS'teki Chrome, iOS ve iPadOS'te Safari ve iOS, iPadOS ve Windows'da 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'de "eski" Chrome 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ü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 olmasını bekliyoruz ancak Android'deki Chrome 108 artık iOS'teki Safari ile benzer şekilde çalışacağı için bu uygulamaların engellenmemesini bekliyoruz. Bu nedenle, iOS'te Safari'de sorunsuz çalışan web siteleri, Android'de de Chrome 108'de düzgün çalışı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 bildirimleri crbug.com adresinden bildirebilirsiniz. Raporun başlığına "ekran klavyesi" ifadesini eklediğinizden emin olun.