מתבצע ב-Chrome ניסיון של שני ממשקי API – Device Posture API ומקטעים באזור התצוגה Enumeration API, שזמינים כגרסת מקור לניסיון ב-Chrome 125. הם נקראים יחד ממשקי API מתקפלים, שנועדו לעזור מפתחים שמתמקדים במכשירים מתקפלים. פוסט זה מציג את ממשקי ה-API האלה שמסביר איך להתחיל לבדוק אותם.
יש בעיקר שני גורמי צורה פיזית שונים: מכשירים עם מסך גמיש (חלקי) ומכשירים עם שני מסכים (עם תפר, ידוע גם? כמכשירים עם מסך כפול).
המכשירים האלה מציבים למפתחים אתגרים והזדמנויות. הם מספקים דרכים נוספות לצפייה בתוכן. לדוגמה, משתמש עשוי להחזיק במכשיר חלק כמו ספר, ואז לעבור לשימוש בו כמו טאבלט מסך שטוח. למכשירים עם שני מסכים יש חיבור פיזי בין המסכים שייתכן שיהיה צורך להביא בחשבון.
ממשקי ה-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, ברשת הדו-ממדית שנוצרה על ידי תכונות החומרה, בהתאמה שמפרידות את הפלחים.
קטע הקוד הבא הוא דוגמה פשוטה ליצירת חוויית משתמש מפוצלת, שבה יש שני קטעי תוכן (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 ומעבר בין מכשירים רציף ומקופל. ניתן גם לראות את הציר כאשר הרלוונטי.
קישורים רלוונטיים
- Device Posture API
- Viewport segments API