Viewport Segments API की मदद से, फ़ोल्ड किए जा सकने वाले डिवाइसों के लिए काम करना

Alexis Menard

पब्लिश होने की तारीख: 9 जून, 2025

Viewport Segments API, व्यूपोर्ट के लॉजिकली अलग-अलग हिस्सों की पोज़िशन और डाइमेंशन को ऐक्सेस करने की सुविधा देता है. इसे JavaScript या CSS की मदद से ऐक्सेस किया जा सकता है. यह Chrome 138 से उपलब्ध है.

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

सेगमेंट, व्यूपोर्ट के ऐसे हिस्से होते हैं जिन्हें अपनी साइट या ऐप्लिकेशन डेवलप करते समय, लॉजिक के हिसाब से अलग-अलग माना जा सकता है. इन शानदार एपीआई की मदद से, फ़ोल्ड किए जा सकने वाले डिवाइसों के लिए खास तौर पर इंटरफ़ेस बनाया या उसे ऑप्टिमाइज़ किया जा सकता है. उदाहरण के लिए, दो पैनल वाला यूज़र एक्सपीरियंस बनाना या सिर्फ़ फ़ोल्ड के ऊपर कॉन्टेंट को लेआउट करने से बचना.

पिछले साल हमने जो ऑरिजिन ट्रायल किया था, उसमें दो बदलाव किए गए हैं:

• JavaScript एट्रिब्यूट segments अब window.visualViewport के बजाय, जोड़े गए नए window.viewport ऑब्जेक्ट में मौजूद है.
• जब डिवाइस को फ़ोल्ड नहीं किया जाता है, तब segments प्रॉपर्टी का व्यवहार, इस सुविधा के सीएसएस व्यवहार के साथ अलाइन किया गया है. जब डिवाइस को फ़ोल्ड नहीं किया जाता है (या फ़ोल्ड नहीं किया जा सकता), तो segments प्रॉपर्टी में एक सेगमेंट का ऐरे होता है. यह पूरे व्यूपोर्ट के साइज़ को दिखाता है.

एपीआई को ऐक्शन में देखने के लिए, फ़ोल्ड किए जा सकने वाले डिवाइसों के डेमो देखें!