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.