Android पर Chrome के 56वें वर्शन से, यूआरएल बार का साइज़ बदलने का तरीका बदल रहा है. आपके लिए ज़रूरी जानकारी यहां दी गई है:
यूआरएल बार के दिखने या छिपने के हिसाब से, व्यूपोर्ट यूनिट (जैसे, vh) में तय की गई लंबाई में बदलाव नहीं होगा. इसके बजाय, vh यूनिट का साइज़, विज़ुअल पैनल की ऊंचाई के हिसाब से तय किया जाएगा. ऐसा तब होगा, जब यूआरएल बार हमेशा छिपा रहेगा. इसका मतलब है कि vh यूनिट का साइज़, "सबसे बड़े व्यूपोर्ट" के हिसाब से तय किया जाएगा. इसका मतलब है कि यूआरएल बार दिखने पर, 100vh दिखने वाली ऊंचाई से बड़ा होगा.
शुरुआती कंटेनिंग ब्लॉक (आईसीबी), रूट कंटेनिंग ब्लॉक होता है. इसका इस्तेमाल, एलिमेंट को उनके पैरंट के हिसाब से साइज़ करते समय किया जाता है. उदाहरण के लिए, <html> एलिमेंट को width: 100%; height: 100% स्टाइल देने पर, यह ICB के साइज़ के बराबर हो जाएगा. इस बदलाव के बाद, यूआरएल बार छिपे होने पर भी आईसीबी का साइज़ नहीं बदलेगा.
इसके बजाय, यह उसी ऊंचाई पर रहेगा जैसे कि यूआरएल बार हमेशा दिखता है
("सबसे छोटा व्यूपोर्ट"). इसका मतलब है कि आईसीबी की ऊंचाई के हिसाब से साइज़ किया गया एलिमेंट, यूआरएल बार छिपे होने पर पूरी ऊंचाई तक नहीं दिखेगा.
ऊपर बताए गए बदलावों में एक अपवाद है. यह बदलाव उन एलिमेंट के लिए नहीं है जो
position: fixed हैं. हालांकि, उनके काम करने के तरीके में कोई बदलाव नहीं होगा. इसका मतलब है कि जिस position:
fixed एलिमेंट का कंटेनिंग ब्लॉक ICB है उसका साइज़, यूआरएल बार के दिखने या छिपने के हिसाब से बदल जाएगा. उदाहरण के लिए, अगर इसकी ऊंचाई 100% है, तो यह हमेशा दिखने वाली ऊंचाई के हिसाब से ही भरेगा. भले ही, यूआरएल बार दिखाया गया हो या नहीं. इसी तरह, vh की लंबाई के लिए भी, यूआरएल बार की पोज़िशन को ध्यान में रखते हुए, दिखने वाली ऊंचाई से मैच करने के लिए उनका साइज़ बदल जाएगा.
इस बदलाव की कुछ वजहें ये हैं:
मोबाइल पर इस्तेमाल की जा सकने वाली
vhयूनिट. इससे पहले,vhयूनिट का इस्तेमाल करने का मतलब था कि जब भी उपयोगकर्ता स्क्रोल की दिशा बदलता, तो पेज अचानक से फिर से फ़्लो कर जाता.बेहतर उपयोगकर्ता अनुभव. अगर उपयोगकर्ता पढ़ते समय पेज फिर से फ़्लो करता है, तो हो सकता है कि वह दस्तावेज़ में अपनी जगह खो दे. यह परेशान करने वाली बात है. साथ ही, पेज को फिर से व्यवस्थित करने और फिर से रंगने के लिए, प्रोसेसर का ज़्यादा इस्तेमाल होता है और बैटरी भी खर्च होती है.
iOS पर Safari के साथ बेहतर इंटरऑपरेबिलिटी. नया मॉडल, Safari के काम करने के तरीके से मेल खाना चाहिए. इससे वेब डेवलपर के लिए काम करना आसान हो जाता है.
vhयूनिट को सबसे बड़े व्यूपोर्ट और आईसीबी को सबसे छोटे व्यूपोर्ट के तौर पर सेट करने का विकल्प, Safari के व्यवहार से मेल खाने के लिए चुना गया है.
फ़ुलस्क्रीन मोड में, जब यूआरएल बार को छिपाने की सेटिंग पर लॉक किया गया हो, तो आईसीबी, स्क्रीन की पूरी ऊंचाई का इस्तेमाल करेगा. यह ऊपर दी गई परिभाषाओं के मुताबिक है, क्योंकि "सबसे छोटा व्यूपोर्ट" पूरा व्यूपोर्ट होगा, क्योंकि यूआरएल बार स्क्रोल करने पर नहीं दिखता.
डेमो
- यहां डेमो दिया गया है.
स्क्रोल किए जा सकने वाले पेज पर, दाईं ओर मौजूद चार बार,
99%,99vh,position:fixed, औरposition:absoluteके सभी संभावित कॉम्बिनेशन हैं. यूआरएल बार को छिपाने से पता चलता है कि इसका हर यूआरएल पर क्या असर पड़ता है. साइज़ बदलने वाले इवेंट, पेज के नीचे प्रिंट किए जाते हैं.
सहायता
- Android पर Chrome 56.