URL çubuğunun yeniden boyutlandırma davranışı sürüm 56'dan itibaren Android'deki Chrome'da değişiyor. Bilmeniz gerekenler:
Görüntü alanı birimlerinde (ör. vh) tanımlanan uzunluklar, gösterilen veya gizlenen URL çubuğuna karşılık olarak 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. Diğer bir deyişle, vh birim "mümkün olan en büyük görüntü alanına" göre boyutlandırılır. Bu, 100vh öğesinin URL çubuğu gösterildiğinde görünen yükseklikten daha büyük olacağı anlamına gelir.
İlk Kapsayıcı 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% stili vermek, öğenin ICB ile aynı boyutta olmasını sağlar. Bu değişiklikle birlikte, URL çubuğu gizlendiğinde ICB yeniden boyutlandırılmaz.
Bunun yerine, URL çubuğu her zaman ("mümkün olan en küçük görüntü alanı") gösteriliyormuş gibi aynı yükseklikte kalır. Bu, ICB yüksekliğine göre boyutlandırılan bir öğenin, URL çubuğu gizlenirken görünen yüksekliği tam olarak doldurmayacağı anlamına gelir.
Yukarıdaki değişikliklerin bir istisnası vardır. Bu, position: fixed olan öğeler içindir. Bu kullanıcıların davranışları değişmez. Yani kapsayıcı bloğu ICB olan bir position:
fixed öğesi, URL çubuğunun gösterildiği veya gizlenmesine yanıt olarak yeniden boyutlandırılır. Örneğin, yüksekliği 100% ise URL çubuğu gösterilse de gösterilmese de her zaman tam olarak görünür 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ırlar.
Bu değişikliğin birkaç nedeni vardır:
Mobil cihazlarda kullanılabilir
vhbirimleri. Daha öncevhbirimleri kullanıldığında, kullanıcı kaydırma yönünü her değiştirdiğinde bir sayfanın düzgün şekilde yeniden düzenleneceği anlamına geliyordu.İyileştirilmiş kullanıcı deneyimi. Kullanıcı okuma sırasında sayfa yeniden düzenlenirse dokümandaki göreli konumunu kaybedebilir. Bu hem can sıkıcı hem de sayfanın geçişini yapmak ve sayfayı yeniden boyamak için ek işlemci kullanımına ve pilin bitmesine neden olur.
iOS'te Safari ile birlikte çalışabilirlik özelliği iyileştirildi. Yeni model, Safari'nin davranışıyla uyumlu olmalı ve web geliştiricilerinin hayatını kolaylaştırmalıdır.
vhbirimlerini mümkün olan en büyük görüntü alanı haline getirmenin pratik olmayan tercihi, ICB'nin mümkün olan en küçük boyutu Safari'nin davranışına uygun hale getirmektir.
URL çubuğunun gizli durumda kilitlendiği tam ekran senaryolarında IB, tam ekran yüksekliğini kullanır. URL çubuğu kaydırma sırasında görünmediği için "mümkün olan en küçük görüntü alanı" tam görüntü alanı olacağı için bu, yukarıdaki tanımlarla tutarlıdır.
Demo
- Bu konuyla ilgili gösterimi izleyebilirsiniz.
Kaydırılabilir bir sayfada sağ tarafta bulunan dört çubuk,
99%,99vh,position:fixedveposition:absolutedeğerlerinin tüm olası kombinasyonlarıdır. URL çubuğunu gizlemek, her birini nasıl etkilediğini gösterir. Yeniden boyutlandırma etkinlikleri sayfanın alt kısımlarına yazılır.
Destek
- Android'de Chrome 56.