Android'de Chrome 56 sürümünden itibaren URL çubuğunun yeniden boyutlandırma davranışı değişiyor. Bilmeniz gerekenler:
Görüntü alanı birimlerinde (ör. vh) tanımlanan uzunluklar, URL çubuğunun gösterilmesine veya gizlenmesine göre yeniden boyutlandırılmaz. Bunun yerine, vh birimleri, URL çubuğu her zaman gizliymiş gibi görüntü alanı yüksekliğine göre boyutlandırılır. Yani vh birimleri "mümkün olan en büyük görüntü alanı" boyutunda olur. Bu, URL çubuğu gösterildiğinde 100vh'ün görünür yükseklikten daha büyük olacağı anlamına gelir.
İlk İçeren Blok (ICB), öğeleri üst öğelerine göre boyutlandırırken kullanılan kök içeren bloktur. Örneğin, <html> öğesine width: 100%; height: 100% stili verildiğinde öğe, ICB ile aynı boyutta olur. Bu değişiklikle birlikte, URL çubuğu gizliyken ICB yeniden boyutlandırılmaz.
Bunun yerine, URL çubuğu her zaman gösteriliyormuş gibi aynı yükseklikte kalır ("mümkün olan en küçük görüntü alanı"). Bu, ICB yüksekliğine göre boyutlandırılmış bir öğenin, URL çubuğu gizliyken görünen yüksekliği tamamen doldurmayacağı anlamına gelir.
Yukarıdaki değişikliklerde tek bir istisna vardır. Bu istisna, position: fixed olan öğeler için geçerlidir. Bu kullanıcıların davranışı değişmez. Yani, kapsayıcı bloğu ICB olan bir position:
fixed öğesi, URL çubuğunun gösterilmesine veya gizlenmesine göre yeniden boyutlandırılır. Örneğin, yüksekliği 100% ise URL çubuğu gösterilsin veya gösterilmesin her zaman tam olarak görünen yüksekliği doldurur. Benzer şekilde, vh uzunlukları da URL çubuğu konumunu dikkate alarak 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ılabilen
vhbirim. Bundan önce,vhbirimleri kullanmak, kullanıcı kaydırma yönünü her değiştirdiğinde sayfanın sarsıntılı bir şekilde yeniden akması anlamına geliyordu.İyileştirilmiş kullanıcı deneyimi. Kullanıcı okurken sayfa yeniden akışı sağlanırsa dokümanda göreli konumunu kaybedebilir. Bu durum can sıkıcı olmakla birlikte sayfayı yeniden düzenleyip yeniden boyamak için ek işlemci kullanımı ve pil tüketimi de gerektirir.
iOS'teki Safari ile birlikte çalışabilirlik iyileştirildi. Yeni model, Safari'nin davranışıyla eşleşerek web geliştiricilerin hayatını kolaylaştırır.
vhbirimlerinin mümkün olan en büyük, ICB'nin ise mümkün olan en küçük görüntü alanını oluşturması, Safari'nin davranışıyla eşleşmek için yapılan sezgisel olmayan bir seçimdir.
URL çubuğunun gizli durumda kilitlendiği tam ekran senaryolarında ICB tam ekran yüksekliğini kullanır. URL çubuğu kaydırıldığında gösterilmediği için "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
- Aşağıda bir gösterim verilmiştir.
Sayfanın sağındaki dört çubuk, kaydırılabilir bir sayfada sağlanan
99%,99vh,position:fixedveposition:absolutedeğerlerinin tüm olası kombinasyonlarıdır. URL çubuğunu gizlediğinizde bu durumun her bir metriği nasıl etkilediği gösterilir. Boyutlandırma etkinlikleri sayfanın alt kısmına yazdırılır.
Destek
- Android'de Chrome 56.