يجرِّب Chrome واجهتَي برمجة تطبيقات، وهما Device Posture API وViewport Reporting API. واجهة Enumeration API المتوفّرة في مرحلة التجربة والتقييم في Chrome 125. وتُعرف هذه الواجهات باسم واجهات برمجة التطبيقات القابلة للطي، وهي مصمّمة لمساعدة المستخدمين في يستهدف المطورون الأجهزة القابلة للطي. تقدم هذه المقالة واجهات برمجة التطبيقات هذه، وتوفر معلومات حول كيفية البدء في اختبارها.
هناك نوعان مختلفان من أشكال الأجهزة: الأجهزة التي تحتوي على وشاشة مرنة (سلسة)، والأجهزة ذات شاشتين (مع درزات، والمعروفة أيضًا باسم كأجهزة ثنائية الشاشة).
تمثل هذه الأجهزة تحديات وفرصًا للمطوّرين. تقدِّم طرق إضافية لعرض المحتوى. على سبيل المثال، قد يحمل المستخدم جهاز سلس مثل كتاب ثم الانتقال إلى استخدامه كجهاز لوحي بشاشة مسطحة. الأجهزة التي تحتوي على شاشتين تكون متصلة فعليًا بين الشاشتين التي قد يلزم أخذها في الاعتبار.
توفّر واجهات برمجة التطبيقات الجديدة هذه طرقًا تتيح للمطوّرين توفير تجارب استخدام أفضل للمستخدمين. لهذه الأجهزة. تعرض كل واجهة برمجة تطبيقات الأساسيات المطلوبة للنظام الأساسي للويب في قسمين من خلال CSS وJavaScript.
واجهة برمجة تطبيقات وضع الجهاز
تتضمّن الأجهزة القابلة للطيّ إمكانيات تتيح لها تغيير وضعها. الحالة المادية للجهاز. ويمكنهم تغيير شكل الجهاز للسماح لمؤلفي المحتوى تقديم تجربة مستخدم مختلفة، وواجهات برمجة التطبيقات الجديدة هذه تجعل التأكد من قدرة محتوى الويب على التفاعل مع حالات الطي المختلفة.
هناك وضعان للجهاز الذي يمكن أن يكون عليه الجهاز:
folded: أوضاع الكمبيوتر المحمول أو الكتاب
continuous: شاشات مسطحة أو أجهزة لوحية أو حتى شاشات منحنية سلسة
CSS
يتم تحديد خدمة CSS جديدة من خلال مواصفات Device Posture API Media-feature — 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" والتبديل بين مستمرة ومطوية: يمكنك أيضًا عرض المفصّلة عند السارية.
روابط ذات صلة
- واجهة برمجة تطبيقات وضع الجهاز
- واجهة برمجة التطبيقات لشرائح إطار العرض