iPhone Duo geldi: Web sayfaları katlanan ekrana hazır mı?

Yeni telefon, yeni ekran şekli

Apple 9 Eylül’de ilk katlanabilir telefonu iPhone Duo’yu tanıttı. Kapalıyken 5,4 inçlik bir ekranı, açınca 7,6 inçlik büyük bir iç ekranı var. Apple’a göre iki ekranın en-boy oranı aynı. Yani içerik açınca sadece büyüyor, şekli bozulmuyor.

Syntax’ın haftalık haber videosunda Scott, Wes ve CJ ilk izlenimlerinin yanında asıl şu soruyu konuştu: Web geliştiricisi olarak bu cihaza nasıl hazırlanırsın?

Katlanan ekranın zorluğu

Normal bir ekran düz bir dikdörtgendir. Katlanan bir ekran ise bazen düzdür, bazen de kitap gibi yarı açık durur. Ortadaki menteşe (katlanma yeri) de sorun çıkarabilir. Bir butonu ya da bir yazıyı tam bu çizginin üstüne koyarsan okunması zorlaşır.

Web’de bu soruna yönelik iki API (tarayıcının geliştiriciye sunduğu hazır özellikler) var.

1. Device Posture API: Cihaz ne durumda?

Bu API, cihazın duruşunu (posture) söylüyor. İki değer var:

• continuous: Ekran düz. Tamamen açık ya da tamamen kapalı olabilir. Normal telefonlar ve bilgisayarlar hep bu durumda sayılır.
• folded: Ekran yarı katlanmış. Kitap gibi ya da dizüstü bilgisayar gibi tutuluyor.

CSS’te buna göre farklı bir düzen yazabilirsin:

@media (device-posture: folded) {
  .video { height: 50vh; }
}

2. Viewport Segments API: Ekran kaç parçaya bölündü?

Bu API, ekranın menteşe yüzünden kaç parçaya (segment) ayrıldığını ve her parçanın nerede olduğunu söylüyor. Örneğin iki parça yan yanaysa, soldaki parçaya bir liste, sağdakine de detay sayfası koyabilirsin:

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

Aynı bilgiye JavaScript’ten de ulaşabilirsin: window.viewport.segments her parçanın konumunu ve boyutunu veriyor.

Peki iPhone Duo’da çalışıyor mu?

İşte işin can sıkıcı kısmı. Bu iki API şimdilik ağırlıklı olarak Chrome ve Edge gibi Chromium tabanlı tarayıcılarda var. iPhone’da tüm tarayıcılar Safari’nin motoru WebKit’i kullanmak zorunda. WebKit ekibi ise bu yazı yazılırken iki API hakkında da resmi bir görüş açıklamamıştı.

Yani bugün iPhone Duo’da sayfan, telefonun katlandığını doğrudan öğrenemiyor. Bu durumda en sağlam yol eski ama altın kural: esnek (responsive) tasarım. Sabit piksel ölçüleri yerine, ekran genişliğine göre uyum sağlayan düzenler kur. Apple da uygulama geliştiricilere belirli ekran boyutlarına değil, farklı boyut ve oranlara göre tasarlamalarını öneriyor. Katlanma API’lerini ise ekstra bir iyileştirme olarak düşün: Destekleyen tarayıcıda daha iyi bir deneyim, desteklemeyende yine düzgün bir sayfa.

Düşün

• Kullandığın bir uygulama ya da site, ekran kitap gibi açıldığında nasıl görünmeli? Hangi bilgiyi sola, hangisini sağa koyardın?
• Bir tarayıcının yeni bir web standardını desteklememesi, geliştiricileri ve kullanıcıları nasıl etkiler?