Bu sayfa, Cloud Translation API ile çevrilmiştir.

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, ekranı kenarlara kadar çizmiyordu. Bu rehberde, 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 sağladığı sistem çubuklarına sahiptir.

Durum çubuğu, altyazı ç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 istediğiniz yerden cihazla doğrudan etkileşim kurmanızı sağlar.

Ekranın üst kısmında bildirim simgelerini ve sistem simgelerini içeren durum çubuğunu bulabilirsiniz.

Sistem çubuğunun vurgulandığı bir Android cihazın üst kısmını gösteren görsel. — Android'deki durum çubuğu vurgulandı *(source)*.

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.

Hareket gezinme çubuğunun göründüğü bir Android cihazın alt kısmını gösteren görsel. — Hareketle gezinme çubuğu *(source).*

Chrome, Android sistem çubuklarına ek olarak, siz ekranı kaydırdıkça dinamik olarak genişleyip daralan bir adres çubuğuna sahiptir.

Chrome'un ekranı kenarlara kadar uzanıyor

Bir web sitesini ziyaret ettiğinizde bu web sitesi, (düzenleme) görüntü alanı olarak bilinen bir dikdörtgende sunulur.

Android'deki Chrome'da, Chrome 135'ten önceki sürümlerde bu düzen görüntü alanı, üst durum çubuğu ile alt hareket 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 hareket gezinme çubuğuna genişlemez.

Android'de Chrome yüklü, kenarlara kadar ekranı olmayan bir Android cihazın resimleri. Soldaki görselde, adres çubuğu genişletilmiş şekilde Chrome gösterilmektedir. Adres çubuğu ile hareketle gezinme çubuğu arasında, yeşil renkle vurgulanmış ve boyutu 100 svh olan bir kutu bulunur. Sağdaki görselde, adres çubuğu geri çekilmiş durumdaki Chrome gösterilmektedir. Durum çubuğu ile hareket gezinme çubuğu arasında, yeşil renkle vurgulanmış ve boyutu 100 lvh olan bir kutu bulunur. Görüntü alanının kendisi mavi noktalı bir dış çizgiye sahiptir. — Chrome 135'ten önceki Android sürümlerinde Chrome'daki görüntü alanının minimum ve maksimum boyutu. Bu boyutlar küçük ve büyük görüntü alanı olarak bilinir. Görüntü alanının etrafında mavi noktalı bir dış çizgi bulunur.

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

Android'de Chrome'da kenardan kenara olmayan (solda) ve Android'de Chrome'da kenardan kenara olan (sağda) ekran görüntüsünü gösteren resimler. Her görselleştirmede, 100vh yüksekliğe sahip bir öğeyi temsil eden mavi bir kutu bulunur. Soldaki metinde, Chrome kenardan kenara olmadığında ne olacağı açıklanmaktadır. "Görüntü alanı, üst durum çubuğu ve alt hareket gezinme çubuğu arasında sıkışıp kalır" ifadesini görürsünüz. Sağdaki metinde, Chrome kenardan kenara olduğunda ne olacağı açıklanmıştır. "Görüntü alanı, hareketle gezinme çubuğuna uzanıyor" ifadesini görürsünüz. — Android'de Chrome'da gösterilen ve kenardan kenara olmayan büyük görüntü alanı (solda) ve Chrome'da kenardan kenara olan büyük görüntü alanı (sağda). Kenardan kenara destekli Chrome'da, Chrome'un dinamik araç çubukları geri çekildiğinde görüntü alanı, hareketle gezinme çubuğu alanına kadar uzanır.

Uçtan uca ekran olmayan Chrome davranışı

Aşağıdaki kayıtta, Android'de kenardan kenara destek olmadan Chrome gösterilmektedir. Sayfada kaydırma yapıldığında Chrome'un adres çubuğu (üstte) dinamik olarak ekrandan çıkar. Ancak Android'e özgü üst durum çubuğu ve alttaki Android'e özgü gezinme çubuğu sabit kalır.

Eski davranış: Android'de kenardan kenara destek olmadan ve https://developer.chrome.com/ yüklüyken Chrome.

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

Uçtan uca ekranlarda Chrome davranışı

Chrome 135'ten itibaren Chrome, ekran görüntüsünü hareket gezinme çubuğu alanına genişleterek web içeriğini cihazın alt kenarına kadar çizebilir.

"Çentik" ile dinamik uçtan uca

Varsayılan olarak, Chrome kenardan kenara ekranlarda, hareketle gezinme çubuğu alanının üzerinde "çene" olarak bilinen yeni bir dinamik alt çubuk gösterilir. Chrome adres çubuğu gibi, bu çene de siz kaydırmaya başladığınızda yolunuzdan çekilir ve görüntü alanının boyutunu etkiler.

Android'de kenardan kenara destek sunan Chrome'un aşağıdaki kaydında, sayfa aşağı kaydırılırken hem Chrome adres çubuğu hem de çene dinamik olarak geri çekilir. Bu, ekran görüntü alanının genişlemesine neden olarak web içeriğinin cihazın alt kenarına kadar çizilmesine olanak tanır.

Yeni davranış: Android'de tam ekran desteği ve https://developer.chrome.com/ yüklü Chrome. Sayfa kaydırıldığında alt çenenin nasıl kaybolduğuna dikkat edin.

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

Etkinleştirmeyle varsayılan olarak kenardan kenara görüntüleme

Kenardan kenara görüntüleme için tasarlanmış web siteleri, viewport meta etiketinde değişiklik yaparak bunu belirtebilir. Etkinleştirildiğinde görüntü alanı, çenenin hiç görünmemesi için varsayılan olarak alt kenara kadar uzanır.

Uçtan uca ekran etkinleştirme özelliğiyle yeni davranış: Sayfa yüklendiğinde görüntü alanı alt kenara kadar uzanır. Çene görünmüyor.

Bir sayfa, viewport meta etiketini ve viewport-fit anahtarını kullanarak kenardan kenara görüntülemeyi desteklediğini belirtebilir.

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

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

viewport-fit değerinin çeşitli değerleri hakkında daha fazla bilgiyi MDN'de bulabilirsiniz.

Hareket gezinme çubuğu tarafından engellenebilecek içeriklerle başa çıkma

Kenardan kenara modunda, hareketle gezinme çubuğu tarafından engellenebilecek tüm içerikleri göz önünde bulundurmanız gerekir.

Alt çene kendiliğinden çekildiği için çoğu durumda 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 kenardan kenara geçişi etkinleştirirseniz veya görüntü alanının alt kısmında konumlandırılmış bir öğeniz varsa bu içeriğin örtülmesi olasılığını hesaba katmanız gerekebilir.

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

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

Android'de Chrome'un kullanıldığı, kenarlara kadar ekranı kaplayan bir Android cihazın resimleri. Soldaki görselde, çenenin göründüğü Chrome gösterilmektedir. Altta sabitlenmiş içerik (kırmızıyla gösterilir) bunun hemen üstünde yer alır. Sağdaki görselde, çenesi görünmeyen bir Chrome kullanıcısı gösterilmektedir. Burada, alttan sabitlenmiş içerik cihazın alt kenarına dayanır. Bu mesajla birlikte, alt konumdaki içeriğin artık hareket gezinme çubuğu tarafından engellendiğini açıklayan bir metin gösterilir. — "bottom: 0" değeriyle alt konumlandırılmış bir öğe içeren bir web sitesinin resmi. Çene görünür olduğunda, alt 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 ve bu noktada kısmen gizlenir.

Bu sorunu azaltmak için güvenli alan iç içe eklemelerini kullanarak etkilenen öğeleri her zaman Android'e özgü alt hareket navigasyon çubuğunun üzerine yerleştirin veya arka planlarının bu alana uzanmasını sağlayın.

Güvenli alan iç içe yerleştirilmeleri

Browser Support

Source

Güvenli alan iç içe yerleştirilmeleri, bir dikdörtgeni görüntü alanının kenarından üst, sağ, alt ve sol iç içe yerleştirilmelerine göre tanımlayan dört ortam değişkenidir.

Bu dört değerin birleşimi, Android hareket navigasyon çubuğu gibi öğelerin engellememesi için içeriğin güvenli bir şekilde yerleştirilebileceği güvenli alan dikdörtgenini oluşturur.

Kenardan kenara modunda Chrome'un kullanıldığı bir Android cihazın resmi. Çene, kayan görünüme sahiptir. Chrome'da, sarı renkle boyanmış güvenli alan dikdörtgeni gösterilir. Alt kenarı, hareketle gezinme çubuğunun hemen üzerindedir. Hareketle gezinme çubuğunda, görüntü alanının alt kısmı mavi olarak gösterilir. Bununla birlikte, güvenli alan dikdörtgeninin safe-area-bottom-inset tarafından görüntü alanına yerleştirildiği ve bu durumun, içeriklerin hareketli gezinme çubuğunun altına çizilmesini engellediği belirtiliyor. — Görüntü alanı ve güvenli alan dikdörtgeni sarıya boyanmış, kenardan kenara modundaki Chrome'u gösteren görsel. Çene geri çekildiğinden güvenli alan alt içe yerleştirilmesi, güvenli alan dikdörtgeninin hareket gezinme çubuğuna ulaşmasını engeller. Sonuç olarak, ekran görüntüsünün bu hareketle gezinme çubuğunun altından göründüğünü görürsünüz.

Güvenli alan alt içe yerleştirilmesini kullanma

Görüntü alanının alt kısmında konumlandırılan öğelerin hareket gezinme çubuğunun altına yerleştirilmesini önlemek için bottom mülkü için değer olarak safe-area-inset-bottom kullanın. safe-area-inset-bottom tarafından döndürülen değer, çene yolundan çekildikçe dinamik olarak güncellenir. Bu sayede, alt konumdaki öğeler Android'in hareketli gezinme çubuğunun üzerinde güzelce kalır.

.stuck-to-the-bottom-of-the-viewport {
  position: fixed;
  bottom: env(safe-area-inset-bottom, 0px);
}

Kenardan kenara modunda Chrome'un kullanıldığı bir Android cihazın resmi. Soldaki görselde çene görünür ve alttan sabitlenmiş içerik hemen üstünde yer alır. Sağdaki görselde çene görünmüyor ve alttan sabitlenmiş içerik, soldaki içerikle aynı yere yerleştirilmiş. Bu sayede normal içerikler, hareket gezinme çubuğunun altından görünür. — `bottom` mülkü ile alt güvenli alan içe yerleştirilmesini kullanan, alt konumlu bir öğe içeren bir web sitesinin resimleri. Çene görünür durumdayken çubuk, Android'in hareketle gezinme çubuğunun üzerinde yer alır. Çene kaybolduğunda öğe de onun üzerinde görünür.

Görsellerde de görebileceğiniz gibi, sonuç henüz mükemmel değil: Çene yolundan çekildiğinde, geri kalan sayfa içeriği hareketli gezinme çubuğu alanında görünür hale gelir. Bunun nedeni, bu durumda görüntü alanı hareket gezinme çubuğu alanına uzanmasıdır.

Altta sabitlenmiş içeriğin altına içerik çizilmesini önlemek için yaygın olarak kullanılan bir yaklaşım, padding-bottom değerini safe-area-inset-bottom olarak ayarlamaktır. Böylece çene gizlenirken alttaki sabitlenmiş öğe otomatik olarak büyür. Bu yöntem işe yarar ancak çene kenarından uzaklaşırken düzenlemede sarsıntı yaşanmasına neden olduğu için önerilmez.

padding değerini güvenli alan içe yerleştirilmiş 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 alt iç girintisi ve güvenli alan alt maksimum iç girintisi kullanma

Bunun yerine, safe-area-inset-bottom ve safe-area-max-inset-bottom'un bir kombinasyonunu kullanmanız önerilir. Çene yolundan çekildikçe dinamik olarak güncellenen dinamik safe-area-inset-bottom'nin aksine safe-area-max-inset-bottom, safe-area-inset-bottom'nin maksimum değerini temsil eder.

Altta sabitlenmiş öğeyi öne doğru büyütmek için bu safe-area-max-inset-bottom değerini kullanın ve öğeyi çenenin arkasına gelecek şekilde aşağı çekmek için safe-area-inset-bottom ile birlikte kullanın.

safe-area-max-inset-bottom öğesini safe-area-inset-bottom ile 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));
}

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üzende aşırı değişiklik olmaz.

Chrome 135'ten önce kenardan kenara görüntüleme özelliğini deneme

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

EdgeToEdgeBottomChin (isteğe bağlı olarak "Hata Ayıklama Etkin" olarak ayarlandığında, diğer kullanıcı arayüzlerinden daha net ayırt edilebilmesi için çenenin yarısı pembeye boyanır)
DrawCutOutEdgeToEdge
BottomBrowserControlsRefactor ("Etkin" olarak değil, "Etkin Dispatch yOffset" olarak ayarlayın)
DynamicSafeAreaInsets
DynamicSafeAreaInsetsOnScroll
EdgeToEdgeWebOptIn
DrawKeyNativeEdgeToEdge
EdgeToEdgeSafeAreaConstraint ("Etkin" olarak değil, "Kaydırılabilir Varyant Etkin" olarak ayarlayın)

Aşağıdaki işaretlerin etkin olmadığından emin olun:

DrawNativeEdgeToEdge
EdgeToEdgeEverywhere

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

Geri bildirimlerinizi bizimle paylaşın

Chrome ve tam ekran uygulamasıyla ilgili geri bildiriminiz varsa lütfen "UI > Browser > Mobile > EdgeToEdge" bileşeninde Chromium hatası bildirerek bizimle iletişime geçin. Geri bildiriminiz bizim için değerli.