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