Device Posture API Nedir? iPhone Duo İçin Katlanabilir Ekran CSS’i

Device Posture API, sayfanın ekranın yarı katlı mı (folded) yoksa düz mü (continuous) olduğunu CSS ve JavaScript’ten okumasını sağlayan web API’si. Apple, 23 Ekim 2026’da iPhone Duo ile birlikte çıkan Safari 27.1’de bu API’yi ve katlanma çizgisinin iki yanını tarif eden Viewport Segments API’yi geliştirici önizlemesi olarak ekledi; ikisi de varsayılan olarak kapalı, feature flag ile açılıyor.

Asıl haber ise WebKit ekibinin kendi cümlesiyle “haber olmaması”: iPhone Duo’daki Safari, diğer iPhone’larla aynı motoru kullanıyor; responsive kurulmuş bir site değişiklik gerektirmeden çalışıyor. Bu yazıda katlanabilir ekran için ek katmanı nasıl kuracağınızı, flag’leri nasıl açacağınızı ve eski rehberlerdeki hangi kodun artık çalışmadığını adım adım anlatıyoruz.

iPhone Duo’da Safari viewport boyutları kaç piksel?

iPhone Duo’nun iki ekranı var: kapalıyken kullanılan dış ekran ve açılınca ortaya çıkan büyük iç ekran. WebKit’in tablosuna göre Safari 27.1’de viewport genişliği 382 ile 951 CSS pikseli, yüksekliği 368 ile 902 piksel arasında değişiyor. Cihazın genel özelliklerini iPhone Duo rehberimizde ele almıştık.

İç ekran, yatay (tek sekme)951 px

İç ekran, dikey (tek sekme)669 px

Dış ekran, yatay594 px

İç ekran, yan yana iki pencere (her biri)385 px

Dış ekran, dikey382 px en dar

Durum	Genişlik	SVH	LVH
Dış ekran, dikey	382	580	618
Dış ekran, yatay	594	368	406
İç ekran, dikey (tek sekme)	669	867	902
İç ekran, yatay (tek sekme)	951	585	620
İç ekran, yan yana iki pencere (her biri)	385	571	609

• Sekme çubuğu yeri değişiyor: Dış ekranda altta (diğer iPhone’lar gibi), iç ekranda üstte (iPad ve Mac gibi).
• Yan yana pencere: İç ekran yataydayken iki pencere açılabiliyor; her biri 385 px genişliğinde dar bir dikey viewport alıyor.
• En dar ekran 382 px: Mevcut mobil kırılım noktalarınız bu genişliği zaten kapsıyorsa yapmanız gereken bir şey yok.

Device Posture API nedir, CSS’te nasıl kullanılır?

Device Posture API, ekranın katlanma durumunu iki yoldan bildirir: CSS’te device-posture medya sorgusu, JavaScript’te navigator.devicePosture. MDN API’yi hâlâ “deneysel” olarak işaretliyor.

folded

Yarı katlı

Cihaz kitap ya da dizüstü pozunda, ekran bir açıyla bükülmüş. Katlanma çizgisi içeriği ikiye bölüyor.

continuous

Düz

Ekran tamamen açık ya da tamamen kapalı (dış ekran). Sayfa tek ve kesintisiz bir yüzey gibi davranıyor.

CSS tarafında, cihaz yarı katlıyken düzeni iki sütuna çevirmek tek bir medya sorgusu:

@media (device-posture: folded) {
  .layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

JavaScript’te güncel durumu type özelliğinden okuyup change olayıyla değişimi dinliyorsunuz:

function reportPosture() {
  console.log(`Device posture: ${navigator.devicePosture.type}`);
}
reportPosture();
navigator.devicePosture.addEventListener("change", reportPosture);

Viewport Segments API nedir, segmentler nasıl numaralanır?

Viewport Segments API daha ayrıntılı: ekranın katlanma çizgisinin iki yanında kalan parçalarını (“segment”) tarif ediyor. Safari 27.1, flag açıkken horizontal-viewport-segments ve vertical-viewport-segments medya sorgularını destekliyor. Biri yan yana, diğeri üst üste duran segment sayısını eşliyor (WebKit).

0 0

Kitap pozu: sol segment

horizontal-viewport-segments: 2 eşleşir. Sol yarı sütun 0, satır 0.

1 0

Kitap pozu: sağ segment

Sağ yarı sütun 1, satır 0. Örnek: env(viewport-segment-width 1 0).

0 0

Dizüstü pozu: üst segment

vertical-viewport-segments: 2 eşleşir. Üst yarı sütun 0, satır 0.

0 1

Dizüstü pozu: alt segment

Alt yarı sütun 0, satır 1. Örnek: env(viewport-segment-height 0 1).

@media (horizontal-viewport-segments: 2) {
  /* Cihaz kitap gibi tutuluyor: iki segment yan yana */
}

@media (vertical-viewport-segments: 2) {
  /* Cihaz dizüstü gibi tutuluyor: iki segment üst üste */
}

Segmentlerin kenarlarına tam oturmak için API altı ortam değişkeni ekliyor. Her biri iki indeks alıyor: önce sütun, sonra satır.

• Boyut: viewport-segment-width, viewport-segment-height
• Kenarlar: viewport-segment-top, viewport-segment-right, viewport-segment-bottom, viewport-segment-left

Aşağıdaki örnek, katlanma çizgisinin iki yanındaki alan kadar genişlikte iki sütun oluşturuyor:

@media (horizontal-viewport-segments: 2) {
  .wrapper {
    display: grid;
    grid-template-columns:
      env(viewport-segment-width 0 0)
      env(viewport-segment-width 1 0);
  }
}

JavaScript’te window.viewport.segments, her segment için bir DOMRect nesnesi içeren dizi döndürüyor. Değer anlık bir görüntü olduğu için duruş değiştiğinde ve pencere yeniden boyutlandığında tekrar okunmalı:

function reportSegments() {
  window.viewport.segments.forEach((segment, i) => {
    console.log(`Segment ${i}: ${segment.width}px × ${segment.height}px`);
  });
}
reportSegments();
navigator.devicePosture.addEventListener("change", reportSegments);
window.addEventListener("resize", reportSegments);

Eski rehberlere dikkat: Chrome’un 2024’teki origin trial yazısında segmentler window.visualViewport.segments üzerinden okunuyordu ve JavaScript tarafının son biçimi henüz belirlenmemişti. Güncel MDN belgesi ve WebKit artık window.viewport.segments kullanıyor. O döneme ait kodu kopyalarsanız undefined ile karşılaşabilirsiniz.

Safari’de Device Posture ve Viewport Segments nasıl açılır?

İki API de kullanıcının cihazında varsayılan olarak kapalı; test etmek için önce iPhone Duo’da flag’leri açmanız gerekiyor. WebKit’in tarif ettiği yol şu:

1. Ayarlar uygulamasını açın.
2. Uygulamalar > Safari bölümüne girin (İngilizce arayüzde Settings > Apps > Safari).
3. Gelişmiş (Advanced) menüsüne dokunun.
4. Feature Flags listesini açın.
5. Device Posture API ve Viewport Segments API anahtarlarını açın, ardından Safari’de sayfanızı yeniden yükleyin.

Elinizde iPhone Duo yoksa Xcode 27.1 veya sonrasını indirip Device Hub üzerinden bir iPhone Duo simülatörü oluşturabilirsiniz; WebKit test için bu yolu öneriyor. Tarayıcıların geliştirici araçlarındaki katlanabilir cihaz emülasyonu ise MDN’ye göre yarı katlı durumu taklit etmiyor, yalnızca tam açık ve tam kapalıyı gösteriyor; bu yüzden orada her zaman continuous değeri dönüyor.

iOS 27’nin genel yeniliklerini iOS 27 rehberimizde topladık.

Katlanabilir ekran için web düzeni nasıl kurulur?

API’ler flag arkasında olduğu için ziyaretçilerin neredeyse hiçbiri şu an bu katmanları görmeyecek. Doğru yaklaşım, katlanabilir desteği üstüne eklenen bir katman olarak kurmak. WebKit de cihaz tespiti yerine özellik tespiti öneriyor.

1. katman

Esnek düzen

Grid, Flexbox ve container query ile 382 px’ten 951 px’e kadar kendiliğinden uyum sağlayan temel düzen. Herkes bunu görür.

2. katman

device-posture

Yalnızca @media (device-posture: folded) içinde iki sütuna geçiş. Desteklemeyen tarayıcı temel düzende kalır.

3. katman

viewport-segment-*

Sütunları katlanma çizgisine tam oturtmak için env(viewport-segment-width 0 0) gibi değişkenler.

4. katman

JavaScript

navigator.devicePosture ve window.viewport.segments varsa dinle; yoksa hiçbir şey yapma.

1. Temeli esnek kurun. Sabit kırılım noktaları yerine bileşen bazlı uyum için container query’leri kullanın; 382 ile 951 px arası kendiliğinden çözülür.
2. Katlı duruşu medya sorgusuyla ekleyin. İki sütunlu düzeni yalnızca @media (device-posture: folded) bloğunun içine yazın; temel stiller bloğun dışında kalsın.
3. Sütunları katlanma çizgisine oturtun. Metin veya buton katlanma çizgisinin üstüne düşmesin diye env(viewport-segment-width …) değerlerini horizontal-viewport-segments: 2 sorgusunun içinde kullanın.
4. JavaScript’i koşula bağlayın. Aşağıdaki kontrolle API yoksa hiçbir dinleyici eklenmez ve hata oluşmaz.

if ("devicePosture" in navigator) {
  navigator.devicePosture.addEventListener("change", updateLayout);
}

if (window.viewport && "segments" in window.viewport) {
  const segments = window.viewport.segments;
  // segment varsa düzeni ona göre hesapla
}

Hangi tarayıcılar Device Posture API’yi destekliyor?

Katlanabilir API’ler yeni değil: Chrome bunları 2024’te Chrome 125–128 arasında origin trial olarak denedi. MDN’nin tarayıcı uyumluluk verisine göre Device Posture API Chrome 132’den, Viewport Segments API ise Chrome 138’den beri Chrome’da var.

API	Chrome / Edge	Safari 27.1 (iPhone Duo)	Firefox
Device Posture API	132 ve sonrası	Önizleme, flag ile	Yok
Viewport Segments API	138 ve sonrası	Önizleme, flag ile	Yok

• Responsive siteler: iPhone Duo’da değişiklik gerektirmeden çalışıyor.
• Safari’deki API’ler: Flag arkasında; WebKit, geri bildirime göre çalışma biçimlerinin değişebileceğini söylüyor.
• Firefox: Uyumluluk verisinde iki API için de destek görünmüyor.

Safari’nin son dönemde eklediği diğer web özellikleri için top-level await ve SVG textPath yazılarımıza bakabilirsiniz.

Dış ekrandaki kontrollerin arkası neden boş kalıyor?

iPhone Duo’nun dış ekranı diğer iPhone’lardan daha geniş ve daha kısa. iOS, içeriğe dikey alan açmak için kontrolleri yana taşıyor. Safari 27.1’de web içeriği bu kontrollerin arkasına uzanmıyor; Safari bunun yerine sayfanın arka plan rengini o alana yayıyor (WebKit).

WebKit, viewport-fit="cover" ile içeriği o alana genişletmenin bir seçenek olduğunu ama incelenen pek çok projenin dört kenar boşluğunu doğru ayarlamadığını yazıyor. Ekip daha hataya dayanıklı bir yöntem arıyor. Şimdilik yapılacak tek şey: sayfanın arka plan rengini bilinçli seçmek, çünkü o boşluğu bu renk dolduruyor.

Sık sorulan sorular

iPhone Duo için sitemi değiştirmem gerekiyor mu?

Hayır. WebKit’e göre iPhone Duo’daki Safari diğer iPhone’larla aynı motoru kullanıyor; esnek, responsive kurulmuş siteler sorunsuz çalışıyor. Device Posture ve Viewport Segments yalnızca katlı duruşa özel bir deneyim istiyorsanız gerekli.

Safari’de Device Posture API nasıl açılır?

iPhone Duo’da Ayarlar > Uygulamalar > Safari > Gelişmiş > Feature Flags yolunu izleyip “Device Posture API” ve “Viewport Segments API” anahtarlarını açın. Bu flag’ler yalnızca sizin cihazınızı etkiler; ziyaretçilerde kapalı kalır.

device-posture: folded ile horizontal-viewport-segments farkı nedir?

device-posture: folded yalnızca ekranın yarı katlı olup olmadığını söyler. horizontal-viewport-segments: 2 ise ekranın yan yana iki parçaya bölündüğünü, yani cihazın kitap gibi tutulduğunu bildirir; dizüstü pozu için vertical-viewport-segments kullanılır.

iPhone Duo olmadan katlanabilir düzen nasıl test edilir?

Xcode 27.1 veya sonrasındaki Device Hub ile iPhone Duo simülatörü oluşturabilirsiniz. MDN’ye göre tarayıcı geliştirici araçlarındaki katlanabilir emülasyon yarı katlı durumu taklit etmediği için orada Device Posture her zaman continuous döner.

window.visualViewport.segments neden çalışmıyor?

Bu ad, Chrome’un 2024’teki deneme sürümüne ait. Güncel belgeler ve Safari 27.1, segmentleri window.viewport.segments üzerinden veriyor; eski örnek kodları bu ada göre güncelleyin.