يُجرِّب Chrome واجهتَي برمجة تطبيقات، وهما Device Posture API وViewport Reports Enumeration API، اللتان تتوفّران كإصدار تجريبي المصدر من Chrome 125. تُعرف هذه واجهات برمجة التطبيقات باسم واجهات برمجة التطبيقات القابلة للطي التي مصمَّمة لمساعدة المطوّرين في استهداف الأجهزة القابلة للطي. تقدم هذه المقالة واجهات برمجة التطبيقات هذه، ومعلومات حول كيفية البدء في اختبارها.
هناك نوعان مختلفان من أشكال الأجهزة: الأجهزة ذات شاشة واحدة مرنة (سلسة)، والأجهزة ذات شاشتين (مع درزات، وتُعرف أيضًا باسم الأجهزة ذات الشاشة المزدوجة).
تمثل هذه الأجهزة تحديات وفرصًا للمطوّرين. إنها توفر طرقًا إضافية يمكن من خلالها عرض المحتوى. على سبيل المثال، قد يحمل المستخدم جهازًا سلسًا مثل كتاب ثم ينتقل إلى استخدامه مثل جهاز لوحي بشاشة مسطحة. تحتوي الأجهزة ذات الشاشتين على اتصال مادي بين الشاشتين والتي قد تحتاج إلى حسابها.
وتوفِّر واجهات برمجة التطبيقات الجديدة هذه طرقًا للمطوّرين لتقديم تجربة مستخدم أفضل لهذه الأجهزة. تعرض كل واجهة برمجة تطبيقات العناصر الأساسية المطلوبة للنظام الأساسي للويب بطريقتين، من خلال CSS وJavaScript.
واجهة برمجة تطبيقات وضع الجهاز
تتمتع الأجهزة القابلة للطي بإمكانيات تتيح لها تغيير وضعية الجهاز. ويمكنهم تغيير شكل الجهاز للسماح لمؤلفي المحتوى بتوفير تجربة مستخدم مختلفة، وتضمن واجهات برمجة التطبيقات الجديدة هذه أن يتفاعل محتوى الويب مع حالات الطي المختلفة.
هناك وضعان للجهاز الذي يمكن أن يكون عليه الجهاز:
folded: أوضاع الكمبيوتر المحمول أو الكتاب
continuous: شاشات مسطحة أو أجهزة لوحية أو حتى شاشات منحنية سلسة
CSS
تحدد مواصفات Device Posture API ميزة وسائط جديدة في CSS، وهي device-posture. تنتقل ميزة الوسائط هذه إلى مجموعة من الوضعيات الثابتة. تتكون هذه الوضعيات من عدد من القيم المحددة مسبقًا التي يشمل كل منها حالة مادية للجهاز.
تتطابق قيم ميزة device-posture مع الوصف السابق للأوضاع المحتملة:
foldedcontinuous
ويمكن إضافة مواقف جديدة في المستقبل في حال طرح أجهزة جديدة في السوق.
أمثلة:
/* 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}`);
});
واجهة برمجة تطبيقات شرائح إطار العرض
شرائح إطار العرض هي متغيرات بيئة 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)
يحتوي كل متغير على بُعدين، يمثلان الموضعين "س" و"ص"، على التوالي، في الشبكة الثنائية الأبعاد التي تم إنشاؤها بواسطة ميزات الأجهزة التي تفصل بين المقاطع.
مقتطف الرمز التالي هو مثال مبسط لإنشاء تجربة مستخدم مقسّمة حيث يكون لدينا قسمان للمحتوى (العمود 1 والعمود 2) على كل جانب من الجزء المرئي من الصفحة.
<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.
تجربة واجهات برمجة التطبيقات القابلة للطي
تتوفّر واجهات برمجة التطبيقات القابلة للطي في فترة تجريبية للمصدر من Chrome 125 إلى Chrome 128. يُرجى الاطّلاع على بدء استخدام مراحل التجربة والتقييم للحصول على معلومات أساسية حول مراحل التجربة والتقييم.
لإجراء الاختبارات المحلية، يمكن تفعيل واجهات برمجة التطبيقات القابلة للطيّ باستخدام علامة ميزات "منصة الويب التجريبية" التجريبية على الرابط
chrome://flags/#enable-experimental-web-platform-features. ويمكن أيضًا تفعيله من خلال تشغيل Chrome من سطر الأوامر باستخدام
--enable-experimental-web-platform-features.
إصدارات تجريبية
بالنسبة إلى العروض التوضيحية، يُرجى الاطّلاع على مستودع العروض التوضيحية. إذا لم يكن لديك جهاز فعلي لإجراء الاختبار باستخدامه، يمكنك اختيار جهاز Galaxy Z Fold 5 أو جهاز Asus Zenbook Fold الذي تمّت محاكاته في "أدوات مطوري البرامج في Chrome" والتبديل بين مستمر ومطوي. يمكنك أيضًا عرض المفصّلة عند الحاجة.
روابط ذات صلة
- واجهة برمجة تطبيقات وضع الجهاز
- ViewportSegment API