Sürüm 56'dan itibaren Android'deki Chrome'da URL çubuğunun yeniden boyutlandırma davranışı değişiyor. Bilmeniz gerekenler:
Görüntü alanı birimlerinde (ör. vh) tanımlanan uzunluklar, gösterilen veya gizlenen URL çubuğuna yanıt olarak yeniden boyutlandırılmaz. Bunun yerine, vh birimleri, URL çubuğu her zaman gizli durumdaymış gibi görüntü alanı yüksekliğine göre boyutlandırılacaktır. Yani vh birimler, "mümkün olan en büyük görüntü alanına" boyutlandırılır. Yani 100vh, URL çubuğu gösterildiğinde görünen yükseklikten daha büyük olur.
İlk Kapsama Bloğu (ICB), öğeleri üst öğelerine göre boyutlandırırken kullanılan kök içeren bloktur. Örneğin, <html> öğesine width: 100%; height: 100% stilini vermek, öğenin ICB ile aynı boyutta olmasını sağlar. Bu değişiklikle, URL çubuğu gizlendiğinde ICB yeniden boyutlandırılmaz.
Bunun yerine, URL çubuğu her zaman gösteriliyormuş gibi aynı yükseklikte
("mümkün olan en küçük görüntü alanı"). Bu, ICB yüksekliğine ayarlanmış bir öğenin, URL çubuğu gizliyken görünür yüksekliği tam olarak doldurmayacağı anlamına gelir.
Yukarıdaki değişikliklerin bir istisnası vardır. Bu durum position: fixed öğeleri içindir. Bunların davranışında değişiklik olmaz. Yani içeren blok ICB olan bir position:
fixed öğesi, gösterilen veya gizlenen URL çubuğuna yanıt olarak yeniden boyutlandırılır. Örneğin, yüksekliği 100% ise URL çubuğunun gösterilip gösterilmeyeceğine bakılmaksızın her zaman tam olarak görünen yüksekliği doldurur. Benzer şekilde vh uzunlukları için, URL çubuğu konumu dikkate alınarak görünür yükseklikle eşleşecek şekilde yeniden boyutlandırılır.
Bu değişikliğin birkaç nedeni vardır:
Mobil cihazlarda kullanılabilir
vhbirimler. Bundan önce,vhbirimleri kullanmak, kullanıcı kaydırma yönünü her değiştirdiğinde sayfanın rahatsız edici bir şekilde yeniden düzenlenmesi anlamına geliyordu.İyileştirilmiş kullanıcı deneyimi. Kullanıcı okuma yaparken sayfa yeniden düzenlenirse dokümandaki göreli konumunu kaybedebilir. Bu durum can sıkıcı olsa da sayfanın yeniden düzenlenmesi ve yeniden boyanması için ek işlemci kullanımına ve pilin harcanmasına neden olur.
iOS'te Safari ile iyileştirilmiş birlikte çalışabilirlik. Yeni model Safari'nin davranışına uygun olmalı, web geliştiricilerin hayatını kolaylaştıracak.
vhbirimlerini mümkün olan en geniş görüntü alanı yapmaya yönelik mantıksız bir tercih, ancak ICB'yi mümkün olan en küçük boyut, Safari'nin davranışıyla eşleştirmektir.
URL çubuğunun gizli duruma kilitlendiği tam ekran senaryolarında ICB, tam ekran yüksekliğini kullanır. URL çubuğu kaydırma sırasında gösterilmediğinden, "mümkün olan en küçük görüntü alanı" tam görüntü alanı olacağından bu, yukarıdaki tanımlarla tutarlıdır.
Demo
- Tanıtım.
Sayfanın sağındaki dört çubuğun tümü, kaydırılabilir bir sayfada sağlanan
99%,99vh,position:fixedveposition:absoluteseçeneklerinin olası kombinasyonlarıdır. URL çubuğunu gizlediğinizde her bir çubuğun nasıl etkilendiği gösterilir. Yeniden boyutlandırma etkinlikleri sayfanın alt kısmına yazdırılır.
Destek
- Android'de Chrome 56.