גרסת מקור לניסיון של ממשקי API מתקפלים

Alexis Menard
Alexis Menard
X GitHub
Thomas Steiner

מתבצע ב-Chrome ניסיון של שני ממשקי API – Device Posture API ומקטעים באזור התצוגה Enumeration API, שזמינים כגרסת מקור לניסיון ב-Chrome 125. הם נקראים יחד ממשקי API מתקפלים, שנועדו לעזור מפתחים שמתמקדים במכשירים מתקפלים. פוסט זה מציג את ממשקי ה-API האלה שמסביר איך להתחיל לבדוק אותם.

יש בעיקר שני גורמי צורה פיזית שונים: מכשירים עם מסך גמיש (חלקי) ומכשירים עם שני מסכים (עם תפר, ידוע גם? כמכשירים עם מסך כפול).

שרטוט סכמתי של מכשיר עם מסך גמיש אחד (חלק) בצד שמאל, ומכשיר עם שני מסכים (עם תפר, מה שמכונה Dual Screen) בצד ימין.

המכשירים האלה מציבים למפתחים אתגרים והזדמנויות. הם מספקים דרכים נוספות לצפייה בתוכן. לדוגמה, משתמש עשוי להחזיק במכשיר חלק כמו ספר, ואז לעבור לשימוש בו כמו טאבלט מסך שטוח. למכשירים עם שני מסכים יש חיבור פיזי בין המסכים שייתכן שיהיה צורך להביא בחשבון.

ממשקי ה-API החדשים האלה מספקים למפתחים דרכים טובות יותר לספק חוויות משתמש טובות יותר למכשירים האלה. כל API חושף את הרכיבים הדרושים של פלטפורמות האינטרנט באמצעות CSS ו-JavaScript.

ממשק API של Device Posture

למכשירים מתקפלים יש יכולות שמאפשרות להם לשנות את ה-_posture_ שלהם, או את המצב הפיזי של המכשיר. הם יכולים לשנות את גורם הצורה שלהם מחברי תוכן כדי לספק חוויית משתמש שונה, וממשקי ה-API החדשים האלה מאפשרים לוודא שתוכן אינטרנט יכול להגיב למצבי הקיפול השונים.

יש שתי מצבים שבהם המכשיר יכול להיות:

  • folded: מצבים של מחשב נייד או ספר.

שרטוט סכמטי של מכשירים בתנוחות שטוחות או של טאבלט, ותצוגה קמורה חלקה.

  • continuous: מסכים שטוחים, טאבלט או אפילו מסכים מעוקלים ללא הפרעות.

שרטוט סכמתי של מכשירים בתנוחות של מחשבים ניידים או ספרים.

CSS

מפרט Device Posture API מגדיר שירות CSS חדש media-feature — מיקום המכשיר. תכונת המדיה הזו מובילה לסדרה של מצבים קבועים. סוגי המצבים האלה של כמה ערכים מוגדרים מראש, שכל אחד מהם מכיל מצב פיזי במכשיר.

ערכי התכונה device-posture תואמים לתיאור הקודם של המצבים האפשריים:

  • folded
  • continuous

יכול להיות שיתווספו מצבים חדשים בעתיד אם מכשירים חדשים יצאו לשוק.

דוגמאות:

/* Using the device in a 'book' posture. */
@media (device-posture: folded) { ... }

/* Using the device in a 'flat' posture, or any typical device like a laptop or
desktop device. */
@media (device-posture: continuous) { ... }

JavaScript

כדי לשלוח שאילתה על מיקום המכשיר, יש אובייקט DevicePosture חדש.

const { type } = navigator.devicePosture;
console.log(`The current device is of type ${type}.`);

כדי להגיב לשינויים בתנוחת המכשיר, למשל משתמש שפותחים מכשיר במלואו ולכן עובר מ-folded אל continuous, ניתן להירשם ל-change אירועים.

navigator.devicePosture.addEventListener('change', (e) => {
  console.log(`The device posture changed to type ${e.type}`);
});

ממשק API של פלחי Viewport

מקטעי אזור התצוגה הם משתני סביבה של CSS שמגדירים את המיקום של אזור נפרד מבחינה לוגית של אזור התצוגה. הפלחים של אזור התצוגה הם נוצר כשאזור התצוגה מחולק לפי תכונת חומרה אחת או יותר (כמו קיפול או ציר בין מסכים נפרדים) שמשמשים כמחיצה. הפלחים הם את האזורים של אזור התצוגה שאפשר להתייחס אליהם כאל אזורים נפרדים באופן לוגי באמצעות מחבר.

CSS

מספר החטיבות הלוגיות שנחשףות באמצעות שתי תכונות מדיה חדשות, מוגדר במפרט רמה 5 של שאילתות מדיה של CSS: vertical-viewport-segments וגם horizontal-viewport-segments הם מפנים ל- מספר הקטעים שאזור התצוגה מחולק.

בנוסף, נוספו משתני סביבה חדשים כדי להריץ שאילתות על המאפיינים של של כל חלוקה לוגית. אלו הם המשתנים:

  • env(viewport-segment-width x y)
  • env(viewport-segment-height x y)
  • env(viewport-segment-top x y)
  • env(viewport-segment-left x y)
  • env(viewport-segment-bottom x y)
  • env(viewport-segment-right x y)

לכל משתנה יש שני מימדים, שמייצגים את המיקום של ה-x וה-y, ברשת הדו-ממדית שנוצרה על ידי תכונות החומרה, בהתאמה שמפרידות את הפלחים.

תרשים שמציג פלחים אופקיים ואנכיים. הקטע האופקי הראשון הוא x 0 ו-y 0, השני x 1 ו-y 0. הקטע האנכי הראשון הוא x 0 ו-y 0, השני x 0 ו-y 1.
הקטע האופקי הראשון הוא x 0 ו-y 0, השני x 1 ו-y 0. הקטע האנכי הראשון הוא x 0 ו-y 0, השני x 0 ו-y 1.

קטע הקוד הבא הוא דוגמה פשוטה ליצירת חוויית משתמש מפוצלת, שבה יש שני קטעי תוכן (col1 ו-col2) בכל צד של החלק העליון.

<style>
  /* Segments are laid out horizontally. */
  @media (horizontal-viewport-segments: 2) {
    #segment-css-container {
      flex-direction: row;
    }

    #col1 {
      display: flex;
      flex: 0 0 env(viewport-segment-right 0 0);
      background-color: steelblue;
    }

    #fold {
      width: calc(env(viewport-segment-left 1 0) - env(viewport-segment-right 0 0));
      background-color: black;
      height: 100%;
    }

    #col2 {
      display: flex;
      background-color: green;
    }
  }

  /* Segments are laid out vertically. */
  @media (vertical-viewport-segments: 2) {
    #segment-css-container {
      flex-direction: column;
    }

    #col1 {
      display: flex;
      flex: 0 0 env(viewport-segment-bottom 0 0);
      background-color: pink;
    }

    #fold {
      width: 100%;
      height: calc(env(viewport-segment-top 0 1) - env(viewport-segment-bottom 0 0));
      background-color: black;
    }

    #col2 {
      display: flex;
     background-color: seagreen;
    }
  }
</style>

<div id="segment-css-container">
   <div id="col1"></div>
   <div id="fold"></div>
   <div id="col2"></div>
 </div>

בתמונות הבאות אפשר לראות איך נראית החוויה במכשיר פיזי.

טלפון מתקפל במצב של ספר אנכי.

טלפון מתקפל במצב אופקי של ספר.

טאבלט מתקפל במצב אופקי של ספר.

JavaScript

כדי לקבל את מספר מקטעי אזור התצוגה, צריך לבדוק את הערך segments visualViewport.

const segments = window.visualViewport.segments;
console.log('The viewport has the following segments:', segments);

כל רשומה במערך segments מייצגת כל פלח לוגי של אזור תצוגה עם DOMArray שמתאר את הקואורדינטות והגודל. segments הוא תמונת מצב של המצב הנתון בזמן ביצוע שאילתה, כדי לקבל שצריך להקשיב לשינויים בתנוחה או לשנות את הגודל של אירועים ולשלוח שאילתות נכס segments.

רוצה לנסות את ממשקי ה-API המתקפלים?

ממשקי ה-API המתקפלים זמינים גרסת מקור לניסיון מ-Chrome 125 עד Chrome 128. צפייה איך מתחילים לעבוד עם גרסאות מקור לניסיון לקבלת מידע רקע על גרסאות מקור לניסיון.

לביצוע בדיקות מקומיות, ניתן להפעיל את ממשקי ה-API המתקפלים באמצעות גרסת האינטרנט הניסיונית סימון תכונות הפלטפורמה ב- chrome://flags/#enable-experimental-web-platform-features אפשר גם מופעלת על ידי הרצת Chrome משורת הפקודה עם --enable-experimental-web-platform-features

הדגמות

אפשר לראות הדגמות בהדגמות מאגר הנתונים. אם אין לך המכשיר הפיזי שרוצים לבדוק בו, אפשר לבחור Galaxy Z Fold 5 או Asus מכשיר אמולציה של Zenbook Fold בכלי הפיתוח ל-Chrome ומעבר בין מכשירים רציף ומקופל. ניתן גם לראות את הציר כאשר הרלוונטי.

כלי פיתוח ל-Chrome שמבצעים אמולציה של מכשיר מתקפל.