फ़ोल्ड किए जा सकने वाले एपीआई का ऑरिजिन ट्रायल

Alexis Menard

Thomas Steiner

Chrome दो एपीआई, Device Posture API और व्यूपोर्ट सेगमेंट को टेस्ट कर रहा है Enumeration API, जो Chrome के ऑरिजिन ट्रायल के तौर पर उपलब्ध हैं 125. इन सभी डिवाइसों को फ़ोल्ड किए जा सकने वाले एपीआई भी कहा जाता है. इन्हें लोगों की मदद करने के लिए डिज़ाइन किया गया है डेवलपर, फ़ोल्ड किए जा सकने वाले डिवाइसों को टारगेट करते हैं. इस पोस्ट में इन एपीआई के बारे में बताया गया है, और में टेस्ट कराने के बारे में जानकारी दी गई है.

ध्यान दें: इन एपीआई को पिछले कुछ सालों के दौरान, Microsoft, Intel, Samsung, और Google.

डिवाइस का नाप या आकार मुख्य रूप से दो अलग-अलग होता है: डिवाइस फ़्लेक्सिबल स्क्रीन (सीमलेस), और दो स्क्रीन वाले डिवाइस (सीम के साथ, ड्यूअल स्क्रीन डिवाइसों के लिए उपलब्ध है.

ये डिवाइस डेवलपर के लिए चुनौतियां और अवसर उपलब्ध कराते हैं. इनकी मदद से, कॉन्टेंट देखने के और भी तरीक़े मिलते हैं. उदाहरण के लिए, कोई उपयोगकर्ता और फिर उसे किसी टैबलेट की तरह इस्तेमाल करने के लिए बदल दें फ़्लैट स्क्रीन. दो स्क्रीन वाले डिवाइसों में दो स्क्रीन होती हैं जिसे ध्यान में रखा जाना चाहिए.

इन नए एपीआई से डेवलपर को बेहतर उपयोगकर्ता अनुभव देने में मदद मिलती है इन डिवाइसों के लिए. हर एपीआई, ज़रूरी वेब प्लैटफ़ॉर्म प्रिमिटिव को दो जगहों पर दिखाता है तरीके, सीएसएस और JavaScript के ज़रिए प्रोसेस किए जाते हैं.

डिवाइस पॉस्चर एपीआई

फ़ोल्ड किए जा सकने वाले डिवाइसों में ऐसी सुविधाएं होती हैं जिनकी मदद से डिवाइस की_ पोज़िशन बदल सकती है या डिवाइस की शारीरिक स्थिति. वे अपना डिवाइस का नाप या आकार बदल सकते हैं. कॉन्टेंट के लेखकों को अलग उपयोगकर्ता अनुभव उपलब्ध कराने के लिए किया जाता है. साथ ही, इन नए एपीआई से ताकि वेब कॉन्टेंट फ़ोल्ड होने की अलग-अलग स्थितियों के हिसाब से काम कर सके.

डिवाइस को इन दो पोज़िशन में इस्तेमाल किया जा सकता है:

• folded: लैपटॉप या बुक पॉस्चर.

• continuous: फ़्लैट, टैबलेट या किसी भी तरह के आसान वक्र डिसप्ले.

सीएसएस

Device Posture API की खास बातें, नए सीएसएस के बारे में बताती हैं मीडिया-सुविधा—डिवाइस की जगह. यह मीडिया सुविधा, तय आस-पास की पोज़िशन पर ले जाती है. इन पॉस्चर में की गणना करने के लिए, जिनमें से हर एक में डिवाइस.

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}`);
});

व्यूपोर्ट सेगमेंट एपीआई

व्यूपोर्ट सेगमेंट, सीएसएस एनवायरमेंट वैरिएबल होते हैं. इनकी पोज़िशन, पोज़िशन और ये व्यूपोर्ट के लॉजिकल रूप से अलग किए गए इलाके के डाइमेंशन होते हैं. व्यूपोर्ट सेगमेंट यह तब बनाया जाता है, जब व्यूपोर्ट एक या ज़्यादा हार्डवेयर सुविधाओं (जैसे कि फ़ोल्ड या अलग-अलग डिसप्ले के बीच में एक कब्ज़ा). सेगमेंट व्यूपोर्ट के क्षेत्र जिन्हें लेखक.

सीएसएस

तार्किक विभाजनों की संख्या दो नई मीडिया सुविधाओं के माध्यम से प्रदर्शित होती है, इसकी जानकारी सीएसएस मीडिया क्वेरी लेवल 5 की खास जानकारी में दी गई है: 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 है.

नीचे दिया गया कोड स्निपेट, स्प्लिट 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>

नीचे दी गई फ़ोटो से यह पता चलता है कि किसी डिवाइस पर अनुभव कैसा दिखता है.

JavaScript

व्यूपोर्ट सेगमेंट की संख्या जानने के लिए, segments visualViewport.

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

ध्यान दें: ऑरिजिन ट्रायल के दौरान, window.visualViewport.segments काम करेगा. सीएसएस वर्किंग ग्रुप की चर्चा के मुताबिक, एपीआई को किस तरह का बनाया जा सकता है, यह तय करना अब भी बाकी है.

segments कलेक्शन की हर एंट्री, निर्देशांक और आकार की जानकारी देने वाला DOMArray वाला व्यूपोर्ट. segments फ़ील्ड, क्वेरी किए जाने पर दी गई स्थिति का स्नैपशॉट होता है, ताकि अपडेट पाने के लिए इसका इस्तेमाल किया जा सके वे मान हैं, जिनकी आपको स्थिति परिवर्तन सुनने या इवेंट का आकार बदलने के लिए की ज़रूरत है segments प्रॉपर्टी.

Foldable API आज़माएं

Foldable API इनमें उपलब्ध हैं ऑरिजिन ट्रायल Chrome 125 से लेकर Chrome 128 तक. यहां जाएं: ऑरिजिन ट्रायल का इस्तेमाल शुरू करना देखें.

लोकल टेस्टिंग के लिए, Foldable API को एक्सपेरिमेंटल वेब की मदद से चालू किया जा सकता है प्लैटफ़ॉर्म सुविधाओं के बारे में बताने वाला फ़्लैग chrome://flags/#enable-experimental-web-platform-features. यह काम भी किया जा सकता है कमांड लाइन से Chrome को चलाकर चालू किया गया है. --enable-experimental-web-platform-features.

डेमो

डेमो के लिए, डेमो देखें डेटा स्टोर करने की जगह के लिए. अगर आपके पास फ़िज़िकल डिवाइस जिसकी जांच करनी है, आपके पास Galaxy Z Fold5 या Asus चुनने का विकल्प है Chrome DevTools में Zenbook Fold की नकल की गई डिवाइस और डिवाइस के बीच स्विच करें लगातार और फ़ोल्ड किया गया. कब्ज़ को विज़ुअलाइज़ भी किया जा सकता है, जब लागू.

इसी विषय से जुड़े कुछ लिंक

• डिवाइस पॉस्चर एपीआई
  • Mozilla पोज़िशन
  • वेबकिट पोज़िशन
  • Chrome के स्टेटस की जानकारी
  • W3C की खास बातें
• व्यूपोर्ट सेगमेंट एपीआई
  • Mozilla पोज़िशन
  • वेबकिट पोज़िशन
  • Chrome के स्टेटस की जानकारी
  • W3C सीएसएस मीडिया क्वेरी की खास बातें और W3C सीएसएस एनवायरमेंट वैरिएबल की खास बातें