דף זה תורגם על ידי Cloud Translation API.

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

Alexis Menard

Thomas Steiner

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

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

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

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

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

Device Posture API

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

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

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

ציור סכמטי של מכשירים במצב שטוח או במצב טאבלט, ומסך מעוגל חלק.

continuous: מסכים שטוחים, מסכי טאבלט או אפילו מסכים מעוגלים חלקים.

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

CSS

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

הערכים של המאפיין 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}`);
});

Viewport Segments API

קטעי שדה התצוגה הם משתני סביבה של 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 של מכשירי Foldable

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

לצורך בדיקה מקומית, אפשר להפעיל את ממשקי ה-API של Foldable באמצעות הדגל Experimental Web Platform features‎ ב-chrome://flags/#enable-experimental-web-platform-features. אפשר גם להפעיל אותו על ידי הפעלת Chrome משורת הפקודה עם --enable-experimental-web-platform-features.

הדגמות

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

כלי הפיתוח ל-Chrome שמחקה מכשיר מתקפל.

קישורים רלוונטיים

Device Posture API
Viewport segments API