Android'de Chrome'u uçtan uca taşıma kılavuzu

Bramus

Yayınlanma tarihi: 28 Şubat 2025

Uçtan uca, Android sistem çubuklarının arkasında çizim yaparak uygulamaların ekranın tüm genişliğini ve yüksekliğini kaplamasına olanak tanıyan bir Android özelliğidir.

Chrome 135'ten önce Android'de Chrome, kenardan kenara çizim yapmıyordu. Bu rehberde, bu değişikliğin web siteleri üzerindeki etkisi ve bir geliştirici olarak bu değişikliği benimsemek için neler yapabileceğiniz açıklanmaktadır.

Her yerde barlar

Android'de, işletim sisteminin kendisi tarafından sağlanan sistem çubukları bulunur.

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 simgeleri ve sistem simgelerini içeren durum çubuğu bulunur.

Android cihazın üst kısmının ve vurgulanmış sistem çubuğunun resmi.
Android'deki durum çubuğu vurgulanmış (kaynak).

Ekranın alt kısmında, geri, ana sayfa ve genel bakış kontrollerini kullanarak gezinmeyi kontrol etmenizi sağlayan gezinme çubuğu bulunur. Bu, klasik üç düğmeli gezinme veya modern hareketle gezinme çubuğu olabilir.

Hareketle gezinme çubuğunun göründüğü bir Android cihazın alt kısmının resmi.
Hareketle gezinme çubuğu (kaynak).

Android sistem çubuklarına ek olarak Chrome'da, kaydırdıkça dinamik olarak genişleyen ve daralan bir adres çubuğu bulunur.

Chrome, kenardan kenara uzanır

Bir web sitesini ziyaret ettiğinizde bu web sitesi, (düzen) görünüm alanı olarak bilinen bir dikdörtgen içinde gösterilir.

Android'de Chrome 135'ten önceki sürümlerde bu düzen görünüm alanı, üstteki durum çubuğu ile alttaki 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 üstteki sistem çubuğuna veya alttaki hareketle gezinme çubuğuna genişlemez.

Android'de Chrome'un uçtan uca olmadığı bir Android cihazın resimleri. Soldaki resimde, adres çubuğu genişletilmiş Chrome gösterilmektedir. Adres çubuğu ile hareketle gezinme çubuğu arasında, boyutu 100svh olan ve yeşille vurgulanmış bir kutu yer alıyor. Sağdaki resimde, adres çubuğu daraltılmış Chrome gösterilmektedir. Durum çubuğu ile hareketle gezinme çubuğu arasında, boyutu 100lvh olan ve yeşille vurgulanmış bir kutu yer alıyor. Görünüm penceresinin kendisi kesikli mavi bir ana hatta sahiptir.
Android'de Chrome 135'ten önceki Chrome sürümlerinde görünüm alanının minimum ve maksimum boyutu. Bu boyutlar, küçük ve büyük görünüm alanı olarak bilinir. Görüntü alanı, kesikli mavi bir ana hatta sahiptir.

Chrome 135'ten itibaren görüntü alanının Android'in hareketle gezinme çubuğuna kadar genişlemesine izin verilir. Bu davranış, uçtan uca olarak tanımlanır.

Android'de Chrome'da uçtan uca olmayan (solda) ve uçtan uca olan (sağda) görünüm penceresinin resimleri. Her görselleştirmede, yüksekliği 100vh olarak ayarlanmış bir öğeyi temsil eden mavi bir kutu bulunur. Soldaki metinde, Chrome'un kenardan kenara olmadığı durumlarda ne olacağı açıklanmaktadır. "Görünüm alanı, üstteki durum çubuğu ile alttaki hareketle gezinme çubuğu arasında sıkıştırılmış durumda kalır" mesajı gösteriliyor. Sağdaki metinde, Chrome'un uçtan uca olduğu durumlarda ne olacağı açıklanmaktadır. "Görüntü alanı, hareketle gezinme çubuğuna kadar uzanıyor" mesajı gösterilir.
Android'de Chrome'da kenardan kenara olmayan (solda) ve kenardan kenara olan (sağda) büyük görüntü alanı. Uçtan uca desteklenen Chrome'da, Chrome'un dinamik araç çubukları geri çekildiğinde görünüm alanı, hareketle gezinme çubuğu alanına kadar uzanır.

Uçtan uca ekran olmadan Chrome davranışı

Aşağıdaki kayıtta, Android'de uçtan uca desteklenmeyen Chrome'un adres çubuğu (üstte), sayfa kaydırıldıkça dinamik olarak kayboluyor. Ancak Android'e özgü üst durum çubuğu ve alttaki Android'e özgü gezinme çubuğu yerinde sabit kalır.

Eski davranış: Android'de uçtan uca destek olmadan Chrome ve https://developer.chrome.com/ yüklendi.

Burada, Chrome'un adres çubuğu geri çekilirken veya genişlerken düzen görüntü alanının boyutu değişiyor.

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.

"Çene" ile uçtan uca dinamik

Chrome, varsayılan olarak uçtan uca görünümde, hareketle gezinme çubuğu alanının üzerinde "çene" olarak bilinen yeni bir dinamik alt çubuk gösterir. Chrome adres çubuğu gibi, bu çene de kaydırmaya başladığınızda kaybolur ve görüntü alanının boyutunu etkiler.

Uçtan uca destekli Android'de Chrome'un aşağıdaki kaydında, sayfa aşağı kaydırıldıkça hem Chrome adres çubuğu hem de çene dinamik olarak geri çekiliyor. Bu durum, görüntü alanının genişlemesine ve web içeriğinin cihazın alt kenarına kadar çizilmesine neden olur.

Yeni davranış: Uçtan uca desteklenen Android'de Chrome ve https://developer.chrome.com/ yüklendi. Sayfa kaydırılırken alt çenin nasıl kaydığına dikkat edin.

Bu çene davranışı, Chrome 135'ten itibaren yeni varsayılan Chrome davranışıdır.

Varsayılan olarak uçtan uca gitme (kullanıcı izniyle)

Uçtan uca tasarlanmış web siteleri, viewport meta etiketini düzenleyerek bunu belirtebilir. Etkinleştirildiğinde, çene görünür hâle gelmeden görüntü alanı varsayılan olarak alt kenara kadar uzar.

Uçtan uca etkinleştirme ile ilgili yeni davranış: Görüntü alanı, sayfa yüklendiğinde alt kenara kadar uzanır. Çene yok.

Bir sayfa, viewport meta etiketi ve viewport-fit anahtarını kullanarak uçtan uca desteği olduğunu belirtebilir.

Uçtan uca özelliğini etkinleştirmek için viewport-fit değerini cover olarak ayarlayın.

<meta name="viewport" content="width=device-width, initial-scale=1, viewpo>rt-fit=cover" /

viewport-fit değişkeninin çeşitli değerleri hakkında daha fazla bilgi edinin.

Hareketle gezinme çubuğu tarafından engellenebilecek içeriklerle ilgilenme

Uçtan uca modda, hareketle gezinme çubuğu tarafından engellenebilecek içerikleri dikkate almanız gerekir.

Çoğu durumda, alt çene kendi kendine kenara çekildiği için herhangi bir işlem yapmanız gerekmez. Kullanıcılar, web sitenizdeki tüm içeriklere daha önce olduğu gibi erişmeye devam edebilir.

Ancak varsayılan olarak uçtan uca gitmeyi etkinleştirirseniz veya görünüm alanının en altında konumlandırılmış bir öğeniz varsa bu içeriğin kapatılma ihtimalini göz önünde bulundurmanız gerekebilir.

.stuck-to-the-bottom-of-the-viewport {
  position: fixed;
  bottom: 0;
}

Çene mevcutken içerik başlangıçta kullanıcılar tarafından erişilebilir durumda olur ancak çene kaybolduğunda Android'in gezinme çubuğu tarafından engellenir.

Android'de uçtan uca Chrome'un yüklü olduğu bir Android cihazın resimleri. Soldaki resimde, çenesi görünür şekilde Chrome gösterilmektedir. Altta sabitlenmiş içerik (kırmızı renkte gösterilir) bunun hemen üzerinde yer alır. Sağdaki resimde, çene kısmı görünmeyen Chrome gösteriliyor. Burada, altta sabitlenen içerik cihazın alt kenarına yaslanır. Bu metin, altta konumlandırılmış içeriğin artık hareketle gezinme çubuğu tarafından engellendiğini net bir şekilde belirtiyor.
`bottom: 0` ile alt kısımda konumlandırılmış bir öğe içeren web sitesi resmi. Çene göründüğünde, alt kısımda konumlandırılmış öğe Android'in gezinme çubuğunun üzerinde yer alır. Çene uzaklaştığında öğe, Android'in gezinme çubuğunun arkasına yerleştirilir. Bu durumda öğe kısmen görünmez.

Bu sorunu azaltmak için güvenli alan eklerini kullanarak etkilenen öğeleri her zaman Android'e özgü alttaki hareketle gezinme çubuğunun üzerinde konumlandırın veya arka planlarının bu alana kadar uzamasını sağlayın.

Güvenli alan iç kısımları

Güvenli alan iç kısımları, dört ortam değişkenidir. Bu değişkenler, dikdörtgeni görüntü alanı kenarından üst, sağ, alt ve sol iç kısımlarıyla tanımlar.

Bu dört değer birleşerek, içeriğin Android hareketli gezinme çubuğu gibi öğeler tarafından engellenmeyeceği şekilde yerleştirilebileceği güvenli alan dikdörtgenini oluşturur.

Uçtan uca modda Chrome'un kullanıldığı bir Android cihazın resmi. Çene, kaydırılarak açılan bir görünüme sahiptir. Chrome'da sarı renkte güvenli alan dikdörtgeni gösteriliyor. Alt kenarı, hareketle gezinme çubuğunun hemen üzerinde yer alır. Hareketle gezinme çubuğunda, görüntü alanının mavi renkte boyanmış alt kısmı gösteriliyor. Metinde, güvenli alan dikdörtgeninin güvenli alan alt iç kenarı ile görüntü alanına yerleştirildiği ve böylece içeriğin hareketle gezinme çubuğunun altına çizilmesinin engellendiği belirtiliyor.
Görüntü alanı ve güvenli alan dikdörtgeni sarı renkte olan, uçtan uca moddaki Chrome'un resmi. Çene geri çekildiği için güvenli alanın alt iç kısmı, güvenli alan dikdörtgeninin hareketle gezinme çubuğuna ulaşmasını engeller. Bu nedenle, görünüm alanı, hareketle gezinme çubuğunun altından görünür.

Güvenli alanın alt ekini kullanma

Görüntü alanının en altında konumlandırılan öğelerin, hareketle gezinme çubuğunun altına yerleştirilmesini önlemek için safe-area-inset-bottom özelliğinin değeri olarak bottom kullanın. safe-area-inset-bottom tarafından döndürülen değer, çene hareket ettikçe dinamik olarak güncellenir. Böylece, altta konumlandırılmış öğeler Android'in hareketle gezinme çubuğunun üzerinde kalır.

.stuck-to-the-bottom-of-the-viewport {
  position: fixed;
  bottom: env(safe-area-inset-bottom, 0px);
}
Uçtan uca modda Chrome'un kullanıldığı bir Android cihazın resmi. Soldaki görselleştirmede çene görünür durumda ve alttan sabitlenmiş içerik hemen üzerinde yer alıyor. Sağdaki görselleştirmede çene görünmüyor ve altta sabitlenmiş içerik, soldakiyle aynı yere yerleştirilmiş. Bu durumda, normal içerik hareketle gezinme çubuğunun altından görünür.
bottom özelliğiyle alttaki güvenli alan içini kullanan, altta konumlandırılmış bir öğeye sahip web sitesi resimleri. Çene göründüğünde çubuk, Android'in hareketle gezinme çubuğunun üzerinde yer alır. Çene kaybolduğunda öğe de çenenin üzerinde durur.

Resimlerde de görebileceğiniz gibi sonuç henüz mükemmel değil: Çene kenara çekildiğinde 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, alttan 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, çene gizlendiğinde altta sabitlenmiş öğe otomatik olarak büyür. Bu yöntem işe yarasa da çene kenara çekilirken düzen aşırı bellek kullanımına neden olduğundan önerilmez.

padding değerini safe-area-inset değerine 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ın alt ekini ve güvenli alanın alt maksimum ekini kullanma

Bunun yerine, safe-area-inset-bottom ve safe-area-max-inset-bottom'yi birlikte kullanmanız önerilir. Çene hareket ettikçe dinamik olarak güncellenen safe-area-inset-bottom değerinin aksine safe-area-max-inset-bottom, safe-area-inset-bottom değerinin maksimum değerini temsil eder.

Alttan sabitlenmiş öğeyi ön tarafta büyütmek için bu safe-area-max-inset-bottom öğesini kullanın ve öğeyi çenenin arkasına gelecek şekilde aşağı çekmek için safe-area-inset-bottom ile birleştirin.

safe-area-max-inset-bottom simgesini safe-area-inset-bottom ile birlikte kullanma

: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));
}

Canlı demoyu deneyin

Görsel sonuç, padding-bottom: env(safe-area-inset-bottom, 0px); yaklaşımıyla aynıdır ancak çok daha iyi performans gösterir. Çene uzaklaştıkça yalnızca bottom için hesaplanan değerin değişmesi gerektiğinden düzen karmaşası oluşmaz.

Uçtan uca modda Chrome'un kullanıldığı bir Android cihazın resmi. Soldaki görselleştirmede çene görünür durumda ve alttan sabitlenmiş içerik hemen üzerinde yer alıyor. Sağdaki görselleştirmede çene görünmüyor ve altta sabitlenen içerik, çenenin bulunduğu alanı kaplayacak şekilde büyümüş. Bu sayede hoş bir görsel efekt elde edilir ve normal sayfa içeriğinin, hareketle gezinme çubuğu alanının altından görünmesi engellenir.
Güvenli alan eklerini dikkate alan, alt kısma sabitlenmiş bir öğe içeren web sitesi resimleri. Çene göründüğünde (solda) öğe çenenin üzerinde yer alır. Çene görünmediğinde öğe, Android'in hareketle gezinme çubuğuna görsel olarak taşar.

Chrome 135'ten önce uçtan uca özelliği deneme

Kenardan kenara özelliğini herkese açık kararlı sürümü yayınlanmadan önce denemek için chrome://flags üzerinden birkaç Chrome özellik flag'ini etkinleştirmeniz gerekir:

  • EdgeToEdgeBottomChin (İsteğe bağlı olarak "Enabled Debug" olarak ayarlarsanız diğer kullanıcı arayüzlerinden daha net şekilde ayırt etmek için çenenin yarısı pembe renkte gösterilir.)
  • DrawCutOutEdgeToEdge
  • BottomBrowserControlsRefactor ("Etkin" olarak ayarlamayın, "Etkinleştirilen Dispatch yOffset" olarak ayarlayın)
  • DynamicSafeAreaInsets
  • DynamicSafeAreaInsetsOnScroll
  • EdgeToEdgeWebOptIn
  • DrawKeyNativeEdgeToEdge
  • EdgeToEdgeSafeAreaConstraint ("Etkin" olarak ayarlamayın, "Kaydırılabilir Varyasyon Etkin" olarak ayarlayın)

Aşağıdaki işaretlerin etkinleştirilmediğinden emin olun:

  • DrawNativeEdgeToEdge
  • EdgeToEdgeEverywhere

Chrome'u iki kez yeniden başlatın.

Geri bildirimlerinizi bizimle paylaşın

Chrome ve uçtan uca uygulamasıyla ilgili geri bildiriminiz varsa lütfen "UI > Browser > Mobile > EdgeToEdge" bileşeninde bir Chromium hatası göndererek bizimle iletişime geçin. Geri bildiriminiz bizim için değerli.