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

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

Alexis Menard

Thomas Steiner

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

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

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

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

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

ממשק API של Device Posture

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

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

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

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

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

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

CSS

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

הערכים של התכונה 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 ולעבור בין האפשרויות continuous (רציף) ו-Folded (מקופלת). במקרים רלוונטיים, אפשר גם להמחיש את הציר.

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

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

Device Posture API
Viewport segments API