Yayınlanma tarihi: 28 Şubat 2025
Uçtan uca, uygulamaların Android sistem çubuklarının arkasına çizim yaparak ekranın tüm genişliğini ve yüksekliğini kaplamasını sağlayan bir Android özelliğidir.
Chrome 135'ten önce, Android'de Chrome uçtan uca çizim yapmıyordu. Bu kılavuzda, bu değişikliğin web siteleri üzerindeki etkisi ve geliştirici olarak bu değişikliği benimsemek için neler yapabileceğiniz açıklanmaktadır.
Her yerde barlar
Android, işletim sisteminin kendisi tarafından sağlanan sistem çubukları ile birlikte gelir.
Durum çubuğu, başlık çubuğu ve gezinme çubuğu birlikte sistem çubukları olarak adlandırılır. Pil seviyesi, saat ve bildirim uyarıları gibi önemli bilgileri gösterir ve her yerden doğrudan cihaz etkileşimi sağlar.
Ekranın üst kısmında, bildirim simgelerini ve sistem simgelerini içeren durum çubuğunu görebilirsiniz.
Ekranın alt kısmında, geri, ana sayfa ve genel bakış kontrollerini kullanarak gezinmeyi kontrol etmenizi sağlayan gezinme çubuğunu bulabilirsiniz. Bu, klasik üç düğmeli gezinme veya modern hareketle gezinme çubuğu olabilir.
Android sistem çubuklarına ek olarak Chrome'da, siz sayfayı kaydırdıkça dinamik olarak genişleyen ve daralan bir adres çubuğu bulunur.
Chrome'da uçtan uca görünüm
Bir web sitesini ziyaret ettiğinizde bu web sitesi, (düzen) görüntü alanı olarak bilinen bir dikdörtgen içinde gösterilir.
Android'de Chrome 135'ten önceki Chrome sürümlerinde, bu düzen görüntü alanı üst durum çubuğu ile alt hareketle gezinme çubuğu arasında çizilir. Chrome'un adres çubuğunun varlığı (veya yokluğu) görüntü alanının boyutunu etkileyebilir ancak görüntü alanı hiçbir zaman üst sistem çubuğuna veya alt hareketle gezinme çubuğuna genişlemez.
Chrome 135'ten itibaren görüntü alanının Android'in hareketle gezinme çubuğuna kadar genişletilmesine izin verilir. Bu davranış, uçtan uca olarak tanımlanır.
Uçtan uca ekran olmadan Chrome davranışı
Aşağıdaki kayıtta, uçtan uca destek sunmayan Android'deki Chrome gösterilmektedir. Sayfa kaydırıldığında Chrome'un adres çubuğu (üstte) dinamik olarak gizlenir. Ancak Android'e özgü üst durum çubuğu ve Android'e özgü alt gezinme çubuğu yerinde kalır.
Burada, Chrome'un adres çubuğu daraldıkça veya genişledikçe düzen görüntü alanının boyutu değişir.
Uçtan uca ekranla Chrome davranışı
Chrome 135'ten itibaren Chrome, görüntü alanını hareketle gezinme çubuğu alanına genişleterek web içeriğini cihazın alt kenarına kadar çizebilir.
"Alt çerçeve" ile dinamik uçtan uca ekran
Chrome, varsayılan olarak uçtan uca modda hareketle gezinme çubuğu alanının üzerinde "çene" olarak bilinen yeni bir dinamik alt çubuk gösterir. Chrome adres çubuğu gibi bu alt çubuk da kaydırmaya başladığınızda kaybolur ve görüntü alanının boyutunu etkiler.
Android'de Chrome'un uçtan uca destekli aşağıdaki kaydında, sayfa aşağı kaydırıldığında hem Chrome adres çubuğu hem de alt kısım dinamik olarak geri çekilir. Bu, görüntü alanının genişlemesine neden olarak web içeriğinin cihazın alt kenarına kadar çizilmesine olanak tanır.
Bu alt çubuk davranışı, Chrome 135'ten itibaren yeni varsayılan Chrome davranışıdır.
Etkinleştirme ile varsayılan olarak uçtan uca geçiş
Uçtan uca için oluşturulan web siteleri, viewport meta etiketini değiştirerek bunu belirtebilir. Etkinleştirildiğinde, görüntü alanı varsayılan olarak alt kenara kadar uzanır ve alt çerçeve görünmez.
Bir sayfa, viewport meta etiketini ve viewport-fit anahtarını kullanarak uçtan uca desteğini belirtebilir.
Uygulamanızı uç uca görüntüleme özelliğine dahil etmek için viewport-fit özelliğini cover değerine ayarlayın.
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
viewport-fit öğesinin çeşitli değerleri hakkında daha fazla bilgiyi MDN'de bulabilirsiniz.
Hareketle gezinme çubuğu tarafından engellenebilecek içeriklerle başa çıkma
Uçtan uca modda, hareketle gezinme çubuğu tarafından engellenebilecek tüm içerikleri göz önünde bulundurmanız gerekir.
Çoğu durumda, alt kısım kendiliğinden kaybolduğu için herhangi bir işlem yapmanız gerekmez. Kullanıcılar, web sitenizdeki tüm içeriklere daha önce olduğu gibi erişebilir.
Ancak varsayılan olarak uçtan uca görüntülemeyi etkinleştirirseniz veya görüntü alanının alt kısmında yer alan bir öğeniz varsa bu içeriğin kapatılabileceğini göz önünde bulundurmanız gerekebilir.
.stuck-to-the-bottom-of-the-viewport {
position: fixed;
bottom: 0;
}
Alt çubuk mevcut olduğunda, içeriğe başlangıçta kullanıcılar tarafından erişilebilir ancak alt çubuk kaybolduğunda Android'in gezinme çubuğu tarafından engellenir.
Bu sorunu azaltmak için güvenli alan eklerini kullanarak etkilenen öğeleri her zaman Android'e özgü alt hareketle gezinme çubuğunun üzerine yerleştirin veya arka planlarının bu alana kadar uzanmasını sağlayın.
Güvenli alan iç kısımları
Güvenli alan ekleri, görüntü alanının kenarından üst, sağ, alt ve sol ekleriyle bir dikdörtgen tanımlayan dört ortam değişkenidir.
Bu dört değer birleştirildiğinde, içeriğin Android hareketle gezinme çubuğu gibi öğeler tarafından engellenmeyecek şekilde yerleştirilebileceği güvenli alan dikdörtgeni oluşturulur.
Güvenli alan alt iç boşluğunu kullanma
Görüntü alanının alt kısmında bulunan öğelerin, hareketle gezinme çubuğunun altında konumlandırılmasını önlemek için bottom özelliğinin değeri olarak safe-area-inset-bottom kullanın. safe-area-inset-bottom tarafından döndürülen değer, alt çubuk hareket ettikçe dinamik olarak güncellenir. Böylece, altta konumlandırılmış öğeler Android'in hareketle gezinme çubuğunun üzerinde düzgün bir şekilde kalır.
.stuck-to-the-bottom-of-the-viewport {
position: fixed;
bottom: env(safe-area-inset-bottom, 0px);
}
bottom özelliğiyle alt güvenli alan iç değerini kullanan, alt kısımda konumlandırılmış bir öğe içeren web sitesi çizimleri. Alt kısım görünür olduğunda çubuk, Android'in hareketle gezinme çubuğunun üzerinde yer alır. Alt çubuk kaybolduğunda öğe de onun üzerinde yer alır.Görsellerde de görebileceğiniz gibi, sonuç henüz mükemmel değil: Çene kaldırıldığında, kalan sayfa içeriği hareketle gezinme çubuğu alanında görünür hale geliyor. Bunun nedeni, bu durumda görüntü alanının hareketle gezinme çubuğu alanına kadar uzanmasıdır.
İçeriğin, alt kısma sabitlenmiş içeriğin altında boyanmasını önlemek için en çok tercih edilen bir yaklaşım, padding-bottom değerini safe-area-inset-bottom olarak ayarlamaktır. Bu sayede, alt kısma sabitlenmiş öğe, alt kısım gizlendikçe otomatik olarak büyür. Bu yöntem işe yarasa da alt kısım hareket ederken düzen karmaşasına neden olduğu için önerilmez.
padding değerini safe-area-inset olarak ayarlamayın.
.stuck-to-the-bottom-of-the-viewport {
position: fixed;
bottom: 0;
padding-bottom: env(safe-area-inset-bottom, 0px); /* 🛑 Don't do this, as it causes layout thrashing. */
}
Güvenli alan alt iç boşluğu ve güvenli alan alt maksimum iç boşluğu kullanma
Bunun yerine, safe-area-inset-bottom ve safe-area-max-inset-bottom'nin birlikte kullanılması önerilir. Alt kısım hareket ettikçe dinamik olarak güncellenen dinamik safe-area-inset-bottom değerinin aksine safe-area-max-inset-bottom, safe-area-inset-bottom değerinin maksimum değerini temsil eder.
Altta sabitlenmiş öğeyi önceden büyütmek için bu safe-area-max-inset-bottom değerini kullanın ve öğeyi aşağı çekerek çenenin arkasına yerleştirmek için safe-area-inset-bottom ile birleştirin.
safe-area-max-inset-bottom ile safe-area-inset-bottom birlikte kullanın.
:root {
--safe-area-max-inset-bottom: env(safe-area-max-inset-bottom, 36px);
--bottom-bar-height: 50px;
}
.stuck-to-the-bottom-of-the-viewport {
position: fixed;
bottom: 0;
height: var(--bottom-bar-height);
padding-bottom: var(--safe-area-max-inset-bottom);
bottom: calc(env(safe-area-inset-bottom, 0px) - var(--safe-area-max-inset-bottom));
}
body {
padding-bottom: calc(var(--bottom-bar-height) + var(--safe-area-max-inset-bottom));
}
Görsel sonuç, padding-bottom: env(safe-area-inset-bottom, 0px); yaklaşımıyla aynıdır ancak çok daha iyi performans gösterir. Alt kısım uzaklaştıkça yalnızca bottom için hesaplanan değerin değişmesi gerektiğinden düzen karmaşası yaşanmaz.
Chrome 135'ten önce uçtan uca görünümü deneyin
Uçtan uca özelliğini herkese açık kararlı sürümünden önce denemek için chrome://flags üzerinden birkaç Chrome özellik bayrağını etkinleştirmeniz gerekir:
EdgeToEdgeBottomChin(İsteğe bağlı olarak "Etkin Hata Ayıklama" olarak ayarlarsanız alt çubuğun yarısı pembe renkte gösterilir. Böylece diğer kullanıcı arayüzü öğelerinden daha kolay ayırt edilebilir.)DrawCutOutEdgeToEdgeBottomBrowserControlsRefactor("Etkin" olarak değil, "Etkin Gönderim yOffset" olarak ayarlayın)DynamicSafeAreaInsetsDynamicSafeAreaInsetsOnScrollEdgeToEdgeWebOptInDrawKeyNativeEdgeToEdgeEdgeToEdgeSafeAreaConstraint("Etkin" olarak değil, "Etkin Kaydırılabilir Varyasyon" olarak ayarlayın)
Aşağıdaki işaretlerin etkinleştirilmediğinden emin olun:
DrawNativeEdgeToEdgeEdgeToEdgeEverywhere
Chrome'u iki kez yeniden başlatın.
Geri bildirimlerinizi bizimle paylaşın
Chrome ve uçtan uca uygulaması hakkında geri bildiriminiz varsa lütfen "UI > Browser > Mobile > EdgeToEdge" bileşeninde bir Chromium hata kaydı oluşturarak bizimle iletişime geçin. Geri bildiriminiz bizim için değerli.