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

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

Alexis Menard

Thomas Steiner

ב-Chrome מתבצעת בדיקה של שני ממשקי API, Device Posture API ו-Viewport Segments Enumeration API, שזמינים כגרסת מקור לניסיון מ-Chrome 125. הקבוצה הזו נקראת 'ממשקי 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

מספר החלוקות הלוגיות מוצג באמצעות שתי תכונות מדיה חדשות, שמוגדרות במפרט של CSS Media Queries ברמה 5: 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, ולהחליף בין המצבים רציף ומכווץ. אם רלוונטי, תוכלו גם לראות את ציר המכשיר.

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

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

Device Posture API
Viewport Segments API