این صفحه به‌وسیله ‏Cloud Translation API‏ ترجمه شده است.

آزمایش اولیه برای APIهای تاشو

Alexis Menard

Thomas Steiner

Chrome در حال آزمایش دو API است، Device Posture API و Viewport Segments Enumeration API، که به‌عنوان نسخه آزمایشی اصلی از Chrome 125 در دسترس هستند. اینها در مجموع به عنوان APIهای تاشو شناخته می‌شوند که برای کمک به توسعه‌دهندگان برای هدف قرار دادن دستگاه‌های تاشو طراحی شده‌اند. این پست این API ها را معرفی می کند و اطلاعاتی در مورد نحوه شروع آزمایش آنها ارائه می دهد.

عمدتاً دو عامل فیزیکی متفاوت وجود دارد: دستگاه‌هایی با یک صفحه نمایش منعطف (بدون درز) و دستگاه‌هایی با دو صفحه (با درز، که به عنوان دستگاه‌های صفحه‌نمایش دوگانه نیز شناخته می‌شوند).

طراحی شماتیک یک دستگاه با یک صفحه منعطف منفرد (بدون درز) در سمت چپ، و یک دستگاه با دو صفحه (با درز، همچنین به عنوان صفحه نمایش دوگانه) در سمت راست.

این دستگاه ها چالش ها و فرصت هایی را در اختیار توسعه دهندگان قرار می دهند. آنها راه های بیشتری را برای مشاهده محتوا ارائه می دهند. برای مثال، یک کاربر ممکن است یک دستگاه بدون درز مانند یک کتاب را در دست بگیرد و سپس به استفاده از آن مانند یک تبلت با صفحه‌نمایش تخت تغییر کند. دستگاه‌های دارای دو صفحه‌نمایش دارای اتصال فیزیکی بین صفحه‌نمایش‌ها هستند که ممکن است نیاز به حساب‌گیری داشته باشند.

این API های جدید راه هایی را برای توسعه دهندگان فراهم می کند تا تجربیات کاربری بهتری را برای این دستگاه ها فراهم کنند. هر API به دو طریق، از طریق CSS و جاوا اسکریپت، موارد اولیه پلتفرم وب مورد نیاز را در معرض دید قرار می دهد.

Device Posture API

دستگاه‌های تاشو قابلیت‌هایی دارند که به آن‌ها اجازه می‌دهد وضعیت خود یا وضعیت فیزیکی دستگاه را تغییر دهند. آنها می توانند فاکتور شکل خود را تغییر دهند و به نویسندگان محتوا اجازه می دهد تا تجربه کاربری متفاوتی را ارائه دهند، و این 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) { ... }

جاوا اسکریپت

برای پرس و جو از وضعیت یک دستگاه، یک شی 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

بخش های viewport متغیرهای محیطی CSS هستند که موقعیت و ابعاد یک منطقه منطقی مجزا از viewport را تعریف می کنند. بخش‌های Viewport زمانی ایجاد می‌شوند که درگاه دید توسط یک یا چند ویژگی سخت‌افزاری (مانند یک تا یا یک لولا بین نمایشگرهای جداگانه) که به عنوان یک تقسیم‌کننده عمل می‌کنند، تقسیم می‌شود. بخش ها نواحی از درگاه دید هستند که نویسنده می تواند آنها را از نظر منطقی متمایز کند.

CSS

تعداد تقسیم‌بندی‌های منطقی از طریق دو ویژگی رسانه جدید، که در مشخصات CSS Media Queries Level 5 تعریف شده‌اند، نشان داده می‌شوند: vertical-viewport-segments و horizontal-viewport-segments . آنها به تعداد بخش هایی که viewport به آن تقسیم شده است، تعیین می کنند.

علاوه بر این، متغیرهای محیطی جدیدی برای پرس و جوی ابعاد هر تقسیم منطقی اضافه شده است. این متغیرها عبارتند از:

env(viewport-segment-width xy)
env(viewport-segment-height xy)
env(viewport-segment-top xy)
env(viewport-segment-left xy)
env(viewport-segment-bottom xy)
env(viewport-segment-right xy)

هر متغیر دارای دو بعد است که به ترتیب موقعیت 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 است.

قطعه کد زیر یک مثال ساده از ایجاد یک UX تقسیم شده است که در آن دو بخش محتوا (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>

عکس‌های زیر نشان می‌دهند که تجربه در یک دستگاه فیزیکی چگونه به نظر می‌رسد.

تلفن تاشو در حالت کتاب عمودی.

تلفن تاشو در حالت کتاب افقی.

تبلت تاشو در حالت کتاب افقی.

جاوا اسکریپت

برای به دست آوردن تعداد بخش‌های viewport، ورودی segments در visualViewport بررسی کنید.

const segments = window.visualViewport.segments;
console.log('The viewport has the following segments:', segments);

هر ورودی در آرایه segments هر بخش منطقی از viewport را با یک 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 DevTools انتخاب کنید و بین Continuous و Folded حرکت کنید. شما همچنین می توانید لولا را در صورت لزوم تجسم کنید.

Chrome DevTools شبیه سازی دستگاه تاشو.

لینک های مربوطه

Device Posture API
Viewport Segments API