वर्चुअल व्यूपोर्ट क्या है?

Chrome M40 में, व्यूपोर्ट में ऐसा बदलाव किया गया है जो बहुत आसान है, लेकिन उपयोगकर्ताओं के लिए इससे बड़ा फ़र्क़ पड़ना चाहिए.

जब मोबाइल ब्राउज़र के काम करने की शुरुआत हुई थी, तब व्यूपोर्ट मेटा टैग की कमी का मतलब था कि वे वेब पेज को करीब 980 पिक्सल स्क्रीन रीयल एस्टेट के रूप में पेश करेंगे और इस साइज़ में रेंडर होंगे. व्यूपोर्ट मेटा टैग की मदद से, डेवलपर चौड़ाई तय कर सकते हैं. इनमें से सबसे सामान्य चौड़ाई "डिवाइस की चौड़ाई" होती है, जिससे स्क्रीन का साइज़ डिवाइस के साइज़ पर सेट हो जाता है. वेब की बुनियादी बातों के बारे में ज़्यादा जानें.

वर्चुअल व्यूपोर्ट के बारे में रिक बायर्स इस तरह बताते हैं: वर्चुअल व्यूपोर्ट का मकसद "व्यूपोर्ट" की धारणा को दो, "लेआउट व्यूपोर्ट" (जहां तय पोज़िशन वाले आइटम अटैच किए जाते हैं) और "विज़ुअल व्यूपोर्ट" (लोगों को असल में क्या देखना है) में बांटना होता है.

सुपर सिंपल उदाहरण

वेबसाइट videojs.com एक अच्छा उदाहरण है, क्योंकि इसका ऐपबार सबसे ऊपर बना हुआ है और ऐपबार की बाईं और दाईं दोनों ओर लिंक हैं.

नीचे दी गई इमेज में दिखाया गया है कि अगर आपने किसी साइट पर ज़ूम इन किया और बाईं और दाईं ओर पैन करने की कोशिश की, तो आपको क्या दिखेगा.

सबसे अच्छे डिवाइस Chrome M39 हैं, जिनमें वर्चुअल व्यूपोर्ट नहीं है और नीचे के तीन डिवाइस Chrome M40 के हैं, जिसमें वर्चुअल व्यूपोर्ट है.

पिक्सलेट की हुई रेंडरिंग.
पिक्सलेट की हुई रेंडरिंग.

Chrome M39 में, ज़ूम इन करने के बाद आपको ऐप्लिकेशनबार दिखेगा, लेकिन दाईं ओर स्क्रोल करने से बार की दाईं ओर मौजूद लिंक नहीं दिखेंगे और लोगो हमेशा दिखेगा.

इसकी तुलना Chrome M40 (जिसमें "वर्चुअल व्यूपोर्ट" होता है) से करें. आपको दिखेगा कि "विज़ुअल व्यूपोर्ट", "लेआउट व्यूपोर्ट" में मौजूद सब कुछ स्क्रोल करता है, ताकि आप दाईं ओर मौजूद लिंक देख सकें.

Internet Explorer में ऐसा पहले से ही मौजूद है और इन बदलावों की वजह से, हम इन बदलावों के बारे में ज़्यादा बारीकी से जान पाते हैं.

html

इसमें डेवलपर को सिर्फ़ यह बदलाव देखने को मिल रहा है कि M39 में, HTML एलिमेंट में overflow: hide लागू किया जा सकता है. हालांकि, M40 में आपका पेज स्क्रोल होने लगेगा. M40 में अब यह काम नहीं करता. सिर्फ़ पेज स्क्रोल नहीं करेगा.

ज़्यादा सटीक जानकारी

तुम ज़्यादा जानना चाहते हो?

इसके बाद, नीचे स्लाइड डेक देखा जा सकता है.