Τα Foldables Ήρθαν για να Μείνουν — Και ο Παγκόσμιος Ιστός Είναι Έτοιμος

Ας το παραδεχτούμε — τα foldable phones βρίσκονταν στο περιθώριο της τεχνολογίας για χρόνια. Οι χρήστες Android απολάμβαναν τη ζωή με τις αναδιπλούμενες συσκευές, ενώ οι υπόλοιποι παρακολουθούσαμε από την άκρη, κοιτάζοντας με απληστία τα εντυπωσιακά demos.

Αλλά η Apple τελικά μπήκε στο παιχνίδι. Και ανεξάρτητα από το σε ποια "ομάδα" ανήκεις, αυτή η κίνηση έχει τεράστιες επιπτώσεις για την κοινότητα web development.

Έχω παρακολουθήσει στενά αυτόν τον χώρο (και ίσως αφιέρωσα αρκετό χρόνο παίζοντας με τον iPhone Duo simulator), και μπορώ να σου πω: οι web APIs που υποστηρίζουν αυτές τις συσκευές είναι πιο ώριμα απ' ό,τι περίμενα. Η Apple δημοσίευσε έξι βίντεο για το πώς να φτιάξεις εφαρμογές για το Duo. Πολλά αφορούν native iOS development, αλλά έχουν αφήσει αρκετό χώρο για web developers με μερικά πραγματικά ενδιαφέρον APIs.

Ας δούμε τι μπορείς να χρησιμοποιήσεις σήμερα.

Device Posture API: Γνώρισε τη Συσκευή σου

Το πρώτο εργαλείο είναι το Device Posture API. Αυτή η χρήσιμη διεπαφή σου λέει αν η οθόνη του χρήστη είναι επίπεδη, διπλωμένη, ή κάτι ενδιάμεσο. Σκέψου το σαν μια ενημέρωση κατάστασης από τη συσκευή.

Σε JavaScript, έχεις πρόσβαση μέσω του navigator.devicePosture, που σου δείχνει αν η οθόνη είναι continuous (κανονική επίπεδη οθόνη) ή folded (μερικώς κλειστή, σαν laptop). Σε CSS είναι ακόμα πιο καθαρό με το device-posture media query:

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

Αυτό είναι τεράστιο για media players, viewers εγγράφων, ή οποιαδήποτε εφαρμογή που θα επωφεληθεί από μια διάταξη δύο οθονών. Φαντάσου τον video player σου να μετακινεί αυτόματα τα controls στην κάτω οθόνη όταν η συσκευή είναι διπλωμένη. Ναι, αυτό συμβαίνει.

Viewport Segments API: Μοίρασε και Βασίλευε

Αν το Device Posture API σου λέει την κατάσταση της συσκευής, το Viewport Segments API σου λέει την ανατομία της. Όταν ένα foldable είναι μισάνοιχτο, δημιουργεί ξεχωριστές περιοχές οθόνης, και αυτό το API σου επιτρέπει να τις "ψάξεις" μέσω κώδικα.

Σε JavaScript, το window.visualViewport.segments επιστρέφει έναν πίνακα από DOMRects που περιγράφουν το μέγεθος, το σχήμα και τη θέση κάθε τμήματος. Σε CSS έχεις ακόμα μεγαλύτερη ευελιξία:

/* Στόχευση layouts βάσει αριθμού segments */
@media (horizontal-viewport-segments: 2) {
  .content-grid {
    grid-template-columns: env(viewport-segment-width 0 0) env(viewport-segment-width 1 0);
  }
}

Οι CSS environment variables είναι ιδιαίτερα κομψές. Η env(viewport-segment-width 1 0) σου δίνει το πλάτος του segment σε horizontal index 1, vertical index 0. Χρειάζεται λίγος χρόνος για να συνηθίσεις το σύστημα συντεταγμένων, αλλά μόλις το καταλάβεις, οι δυνατότητες είναι ατελείωτες.

Γιατί Πρέπει να σε Απασχολεί

Τα foldable phones δεν είναι πια niche προϊόν. Γίνονται mainstream, και οι web APIs είναι ήδη εδώ για να τα υποστηρίξουν.

Για startups και developers, αυτό ανοίγει εντελώς νέα patterns αλληλεπίδρασης. Μια travel app θα μπορούσε να δείχνει έναν χάρτη σε μια οθόνη και τις λεπτομέρειες κράτησης στην άλλη. Ένα e-commerce site θα μπορούσε να εμφανίζει εικόνες προϊόντων σε ένα segment και κριτικές στο άλλο. Ένας code editor θα μπορούσε επfinally να δώσει στους mobile developers μια πραγματική split-view εμπειρία χωρίς καμία native εφαρμογή.

Η γραμμή της ένωσης δεν είναι περιορισμός — είναι ευκαιρία. Και με αυτά τα APIs, μπορείς να φτιάξεις εμπειρίες που αισθάνονται native στο foldable hardware, ενώ παραμένουν προσβάσιμες σε όλους.

Πώς να Ξεκινήσεις

Το καλύτερο μέρος; Δεν χρειάζεται να τρέξεις να αγοράσεις foldable για να πειραματιστείς. Τόσο το Safari Technology Preview όσο και τα Chrome DevTools έχουν υποστήριξη simulators για αυτά τα APIs. Στήσε μια virtual συσκευή, άλλαξε μεταξύ flat και folded καταστάσεων, και δες τα layouts σου να προσαρμόζονται σε πραγματικό χρόνο.

Αν έχεις επιχείρηση με website ή web app, τώρα είναι η στιγμή να ελέγξεις τη responsive στρατηγική σου. Το ερώτημα δεν είναι αν τα foldables θα έχουν σημασία — είναι αν θα είσαι έτοιμος όταν οι χρήστες σου αρχίσουν να εμφανίζονται με αυτές τις συσκευές.

Η web πλατφόρμα συνεχίζει να εξελίσσεται με ενδιαφέροντα τρόπο, και APIs σαν αυτά αποδεικνύουν ότι μπορεί να κινηθεί γρήγορα όταν το hardware εμπνέει νέες αλληλεπιδράσεις.

Η σειρά σου να διπλώσεις.