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

Alexis Menard

पब्लिश किया गया: 9 जून, 2025

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

Browser Support

• 138
• 138
• x
• x

Source

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

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

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

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

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