वेबकिट को ठीक करना और 100vh . की ऊंचाई
100 प्रतिशत व्यूपोर्ट ऊंचाई का उपयोग करते समय, वेबकिट और इसलिए सफारी सैद्धांतिक रूप से स्टाइल को ठीक से संभालती है। लेकिन अगर आप सुरक्षित क्षेत्र के इनसेट का भी सम्मान करना चाहते हैं, जो मोबाइल पर काफी महत्वपूर्ण हैं, तो एक दृश्य असंगति दिखाई देती है।
चूंकि यह प्रगतिशील वेब ऐप Tailwind.css का उपयोग करता है, इसलिए मैं आपको दिखाता हूं कि सुरक्षित क्षेत्र का सम्मान करते हुए क्रमशः सफारी में 100vh का सही तरीके से उपयोग कैसे करें, ताकि आपका वेब ऐप सभी स्क्रीन पर बांका दिखे।
PostCSS-प्लगइन का उपयोग करना
मैं प्लगइन “postcss-100vh-fix” प्लगइन का उपयोग करने की सलाह देता हूं। जैसा कि आप पहले से ही Tailwind के आरंभीकरण के साथ एक पोस्टसीएसएस-कॉन्फ़िगरेशन सेट कर चुके हैं, यह समाधान काफी स्वाभाविक रूप से फिट बैठता है और व्यूपोर्ट की ऊंचाई की समस्या को ठीक करने के लिए कम से कम समय का उपयोग करता है।
// 1. Install the dependency
// npm i postcss-100vh-fix
//
// Then use a custom PostCSS-config.
// This example assumes you only have
// one custom plugin, which leads to
// the following config.
module.exports = {
plugins: [
require("postcss-100vh-fix")
],
};
सभी Next.js-उपयोगकर्ताओं के लिए एक नोट
अगर आप Next.js के साथ Tailwind का इस्तेमाल कर रहे हैं, तो कुछ बदलाव करने के लिए आपको अपने PostCSS-config में थोड़ा सा बदलाव करना होगा। "आवश्यकता" के माध्यम से आयात का उपयोग करने के बजाय, आपको प्लगइन की सरणी में पैकेज के नाम को एक स्ट्रिंग के रूप में उपयोग करना होगा। इसके अलावा, आपको डिफ़ॉल्ट रूप से आने वाले सभी Tailwind के स्वयं के प्लग इन को शामिल करने की आवश्यकता नहीं है, क्योंकि उन्हें Tailwind द्वारा स्वचालित रूप से जोड़ा जाता है।
// Effectively the same config,
// but now compatible with Next.js,
// which only accepts strings for
// plugins, where they represent their
// package name.
module.exports = {
plugins: ["tailwindcss","autoprefixer","postcss-100vh-fix"],
};
// ... in your app ...
// Now all that's left to do is
// apply the screen-height, which
// results in a '100vh'-value:
//
// ... <div class="h-screen"> ...
एक और यकीनन बदसूरत समाधान
जबकि निम्नलिखित की निश्चित रूप से अनुशंसा नहीं की जाती है, मैं आपको दिखाता हूं कि यह तकनीकी रूप से दूसरे तरीके से भी कैसे संभव है। निम्न कोड को आपके पोस्टसीएसएस-कॉन्फ़िगरेशन में किसी प्लग इन या परिवर्तन की आवश्यकता नहीं है, लेकिन कुछ जावास्क्रिप्ट की आवश्यकता है और टेलविंड के सिंटैक्स से बाहर निकलता है, कम से कम इस उदाहरण में बिना किसी अनुकूलन के।
// Manually setting the 'style':
//
function View(){
const isMobileWebKit = useIsMobileWebkit();
return (
<div
style={{
height: isMobileWebKit ? "-webkit-fill-available" : "100vh"
}}> /* ... */ </div>;
}
/*
<div
style={{
height: isMobileWebKit ? "-webkit-fill-available" : "100vh"
}}> ...
*/
// This is the hook to determine
// if we're in a WebKit-env:
export function useIsMobileWebkit() {
const [flag, setFlag] = useState(false);
useEffect(() => setFlag(isMobileWebkit()), []);
return flag;
}
और हम कर चुके हैं
यह आलेख वेबकिट पर एक छोटी लेकिन यकीनन कष्टप्रद दृश्य त्रुटि को ठीक करने के बारे में एक त्वरित मार्गदर्शिका प्रदान करता है जब व्यूपोर्ट की ऊंचाई के 100 प्रतिशत का उपयोग करते हुए सुरक्षित क्षेत्र के इनसेट का सम्मान करते हुए। मुझे उम्मीद है कि आपको यह लेख पसंद आया होगा, नीचे सूचीबद्ध अन्य दिलचस्प गाइड और उदाहरणों की जांच करना सुनिश्चित करें।
