Katlanabilir Telefonlar ve Web Dünyası: Artık Sadece Android'in Oyun Alanı Değil

Şimdi aramızda dürüst olalım — katlanabilir telefonlar teknoloji dünyasının çevresinde birkaç yıldır dolanıp duruyordu. Android kullanıcıları bu katlanabilir hayatı yaşarken, bizler sahne kenarından izleyip o şık cihaz demolarına içten içe gıpta ediyorduk. Ama Apple sonunda atılımı yaptı ve iPhone taraftarı olup olmadığınız bir yana, bu hamle web geliştirme topluluğu için muazzam sonuçlar doğuruyor.

Bu konuyu yakından takip eden biri olarak (ve hafta sonu iPhone Duo simülatörüyle utanç verici miktarda vakit geçirmiş biri olarak), söyleyebilirim ki: bu cihazları destekleyen web API'leri şaşırtıcı derecede olgun. Apple, Duo için uygulama geliştirme konusunda altı video yayınladı ve bunların büyük kısmı yerel iOS dünyasına ait olsa da, web geliştiricileri için bazı gerçekten etkileyici API'lerle kapıyı sonuna kadar açık bırakmışlar.

Hadi gelin, bugün kullanabileceklerinizi yakından inceleyelim.

Device Posture API: Cihazının Durumunu Bil

İlk durağımız Device Posture API. Bu şık arayüz, kullanıcınızın düz bir ekrana mı, katlanmış bir ekrana mı yoksa ikisinin arasında bir duruma mı baktığını size söylüyor. Cihazınızın fiziksel durumu hakkında size bir nevi güncelleme verdiğini düşünün.

JavaScript'te navigator.devicePosture üzerinden erişebilirsiniz. Bu, ekranın continuous (normal düz ekran) mı yoksa folded ( dizüstü bilgisayar gibi kısmen katlanmış) mı olduğunu size bildirir. CSS tarafında ise işler daha da temiz:

@media (device-posture: folded) {
  .app-container {
    flex-direction: column;
  }
}

Bu, medya oynatıcılar, doküman görüntüleyiciler veya iki ekranlı kurulumdan faydalanabilecek her türlü uygulama için büyük bir adım. Video oynatıcınızın cihaz katlandığında kontrolleri otomatik olarak alt ekrana taşıdığını hayal edin — evet, bu artık gerçek.

Viewport Segments API: Böl ve Yönet

Device Posture API cihazın durumunu söylüyorsa, Viewport Segments API onun anatomisini anlatır. Katlanabilir bir telefon kısmen katlandığında, ayrı ekran bölgeleri oluşturur ve bu API size bu bölgeleri programatik olarak sorgulama imkanı verir.

JavaScript'te window.visualViewport.segments her bir bölgenin boyutunu, şeklini ve konumunu tanımlayan DOMRect'lerden oluşan bir dizi döndürür. CSS'te ise daha fazla esneklik elde edersiniz:

/* Bölge sayısına göre layout hedefleme */
@media (horizontal-viewport-segments: 2) {
  .content-grid {
    grid-template-columns: env(viewport-segment-width 0 0) env(viewport-segment-width 1 0);
  }
}

CSS çevre değişkenleri özellikle zarif bir çözüm sunuyor. env(viewport-segment-width 1 0) size yatay indeks 1, dikey indeks 0'taki bölgenin genişliğini verir. Koordinat sistemini kavramak biraz zaman alabilir ama bir kez anladığınızda, olasılıklar sınırsız hale geliyor.

Projeleriniz İçin Neden Önemli?

İşte asıl mesele — katlanabilir telefonlar artık niş bir ürün değil. Ana akıma doğru gidiyorlar ve web API'leri onları desteklemek için çoktan hazır. NameOcean'da geleceğe yönelik tasarım yapmanın öneminden sık sık bahsediyoruz ve bu, neden bu kadar kritik olduğunun mükemmel bir örneği.

Girişimciler ve geliştiriciler için bu, tamamen yeni etkileşim kalıplarının önünü açıyor. Bir seyahat uygulaması bir ekranda haritayı, diğerinde rezervasyon detaylarını gösterebilir. Bir e-ticaret sitesi bir bölümde ürün görsellerini, diğerinde yorumları sunabilir. Bir kod editörü, herhangi bir yerel uygulamaya gerek kalmadan mobil geliştiricilere gerçek bir split-view deneyimi sunabilir.

Katlama çizgisi bir kısıtlama değil — bir fırsat. Ve bu API'lerle, katlanabilir donanıma özgü hissettiren ama yine de herkes için erişilebilir deneyimler inşa edebilirsiniz.

Başlangıç

En güzel yanı? Denemeye başlamak için hemen bir katlanabilir telefon almaya koşmanıza gerek yok. Safari Technology Preview ve Chrome DevTools, bu API'leri test etmek için simülatör desteği sunuyor. Sanal bir cihaz başlatın, düz ve katlanmış durumlar arasında geçiş yapın ve layout'larınızın gerçek zamanlı olarak uyarlandığını izleyin.

Bir işletme web sitesi veya uygulaması çalıştırıyorsanız, şimdi responsive tasarım stratejinizi gözden geçirmenin tam zamanı. Soru, katlanabilir telefonların önemli olup olmayacağı değil — kullanıcılarınız bu cihazlarla gelmeye başladığında hazır olup olmayacağınız.

Web platformu büyüleyici şekillerde evrilmeye devam ediyor ve bu tür API'ler, donanım yeni etkileşimleri tetiklediğinde ne kadar hızlı hareket edebileceğini kanıtlıyor. Sıra sizde — katlayın.