Kasım ayında Chrome 108'in kullanıma sunulmasıyla birlikte Chrome, dokunmatik klavye (OSK) gösterildiğinde Layout Görünümü'nün davranış biçiminde bazı değişiklikler yapacaktır. Bu değişiklikle birlikte, Android'deki Chrome artık Düzen Görünümünü yeniden boyutlandırmayacak ve yalnızca Görsel Görünümü yeniden boyutlandıracaktır. Bu, Android'deki Chrome'un davranışını iOS'teki Chrome'un ve iOS'teki Safari'ninkiyle aynı seviyeye getirecektir.
Neler olduğuna, Chrome'un bu değişikliği neden yaptığına ve hazırlanmak için neler yapabileceğinize dair bazı arka plan bilgilerini burada bulabilirsiniz.
Düzen Görünümü ve Görsel Görünüm
Bir web sitesini ziyaret ettiğinizde, sayfa yüklendikten sonra sayfanın tüm içeriğini göremezsiniz. Bunun yerine, tarayıcı size sayfanın bir bölümünü görmek için kullanabileceğiniz bir görüntü alanı sunar. Bu görüntü alanı, Düzen Görünümü olarak da bilinir. Bir sayfanın içeriği çok fazla büyüdüğünde, tarayıcı bir kaydırma mekanizması sunar.
Öğeler position: fixed kullanılarak konumlandırılırken bunlar söz konusu Düzen Görünümünün karşısında yer alır. Siz bir sayfayı aşağı kaydırırken Düzen Görünümü yerinde kaldığı için position: fixed kullanan öğeler de aynı şekilde kalacaktır.
position: fixed (mavi kutular) kullanılarak yerleştirilmiş iki öğeye sahip olacak şekilde, mobil tarayıcılarda Düzen Görünümü (mavi dış çizgi) görselliği. iPhone'da (soldan sağa) Safari, Android'de Chrome ve Android'de Firefox gösterilmektedir.
Bu Düzen Görünümüne ek olarak, tarayıcı ayrıca bir Görsel Görünüm de sunar. Görüntü alanının o anda görünür olan kısmını temsil eder. Bu Görsel Görünüm, zum düzeyi 1'de Düzen Görünümü kadar büyüktür.
İki parmak ucuyla yakınlaştırma yaparken Görsel Görünüm'ün boyutunu Düzen Görüntü Alanı ile ilişkili olarak 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 girmesini sağlar.
Bunu yaparken, tarayıcılar çeşitli görüntü alanlarıyla ilişkili olarak aşağıdaki yöntemlerden biriyle yanıt verir:
- Yalnızca Görsel Görünümü yeniden boyutlandırın ve Düzen Görünümünü uzaklaştırın.
- Hem Görsel Görünümü hem de Düzen Görünümünü yeniden boyutlandırın.
- Sanal klavyeyi ikisinin de üstüne yerleştirerek Düzen Görünümü veya Görsel Görünümün hiçbirini yeniden boyutlandırmayın.
Bu üç davranış şu şekilde görselleştirilir:
Ziyaretçinin kullandığı tarayıcı ve işletim sistemi kombinasyonuna bağlı olarak, davranışlardan biri sizin kontrolünüz dışında kullanılır.
Çeşitli yeniden boyutlandırma davranışlarını eşleme
Interop 2022'nin Viewport Investigation Effort bölümünde, her önemli tarayıcı ve işletim sistemi kombinasyonu için görüntü alanıyla ilgili çeşitli yönler incelendi.
Test edilen yönlerden biri, OSK gösterildiğinde yeniden boyutlandırma davranışıdır. Bu durum, şu sınıflandırmaya yol açmıştır:
Birinci grup
Görsel Görünümü, Düzen Görünümünü değiştirmeden yeniden boyutlandıran tarayıcılar.
- iOS'ta 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'ta Firefox
Üçüncü grup
Görüntü alanlarının hiçbirini yeniden boyutlandıran tarayıcılar:
- Varsayılan olarak yok - Android'deki Chrome'da Virtual Klavye API'sini kullanarak 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 farklılık, web sitelerinin birlikte çalışamayan bir düzenine ve boyutlandırma davranışına yol açar.
1. gruptaki tarayıcılarda OSK gösterilirken:
- Görüntü alanına bağlı birimlerin hesaplanan değerleri aynı kalır.
- Tüm görsel alanı kaplayacak şekilde tasarlanmış öğeler boyutlarını korur.
position: fixedkullanan öğeler yerinde kalır ve OSK tarafından engellenebilir.
2. gruptaki tarayıcılarda OSK gösterilirken:
- Görüntü alanına bağlı birimlerin hesaplanan değerleri küçülür.
- Görsel alanı bütünüyle kaplayacak şekilde tasarlanmış öğeler.
position: fixedkullanan öğeler düzende başka bir yere gidebilir.
position: fixed (mavi kutular) kullanan öğeler için farklı konumlara dikkat edin. iOS'te Safari (solda) ve Android'de Chrome (ortada ve sağ) gösterilmektedir.
User-Agent algılamaya başvurmadığınız veya kapsamlı komut dosyası çalıştırmadığınız sürece, hangi davranışın kullanıldığını bilemezsiniz. Ayrıca, bu davranış, kullanıcının ziyaret ettiği tarayıcı ve işletim sistemi kombinasyonuna göre belirlendiğinden değiştiremezsiniz.
Chrome 108'de varsayılan davranışı değiştirme
Chrome 108'den itibaren Android'deki Chrome, ekran klavyesi gösterildiğinde Düzen Görünümünü artık yeniden boyutlandırmayacak şekilde görüntü alanı yeniden boyutlandırma davranışını ayarlayacaktır.
Bu güncelleme, 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 getirecektir.
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 bağlı stabil birimlere olanak tanır: 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. Ayrıca Chrome 108'de gönderim, görüntü alanı meta etiketinin bir uzantısıdı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:
resizes-visual: Düzen Görünümünü değil, yalnızca Görsel Görünümü yeniden boyutlandırın.resizes-content: Hem Görsel Görünümü hem de Düzen Görünümünü yeniden boyutlandırın.overlays-content: Hiçbir görüntü alanı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üntü alanı meta etiketine interactive-widget öğesi eklemezseniz Chrome varsayılan davranış olan resizes-visual'i kullanır.
Görsel olarak, ayarların çeşitli görüntü alanlarında şu etkisi vardır:
resizes-visual, resizes-content ve overlays-content.
Tarayıcınızdaki her bir değerin 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'ye benzer şekilde davranacağından bu sitelerin engellenmemesini bekliyoruz. Bu nedenle, iOS'te Safari'de sorunsuz çalışan web siteleri Android'de Chrome 108'de de sorunsuz şekilde çalışır.
Bununla birlikte, web sitesi yazarlarının web sitelerini 27 Ekim 2022'den itibaren beta sürümünde sunulan Chrome 108'de aktif olarak test etmelerini öneririz. Özellikle position: fixed kullanan ve/veya Görüntü alanına bağlı birimler kullanan öğelere dikkat edin.
Geri bildirimleri crbug.com adresinden bildirebilirsiniz. Raporun başlığına "ekran klavyesi" ifadesini eklediğinizden emin olun.