Solution for the 100vh Issue : আমরা যারা ফ্রন্ট এন্ড ডেভলপার তাদের কাছে খুব পরিচত একটা প্রবলেম, আর সেটা হলো মোবাইল ব্রাউজারের ভিউ পোর্টে 100vh এর সঠিক উচ্চতা নির্ধারন করা।
আগে জেনে নেই ভিউ পোর্ট কি ? আমরা আমাদের ডেস্কটপ, ল্যাপটপ বা মোবাইল স্ক্রীনের যতোটুকু দেখতে পারি সেটাকেই ভিউ পোর্ট বলা হয়। একেক ডিভাইসের ভিউ পোর্ট একেক রকম। আর vh মানে ভিউ পোর্ট উচ্চতা, আর 1vh এর মানে হলো ভিউ পোর্ট উচ্চতার 1% , তারমানে 100vh এর অর্থ হলো ভিউ পোর্ট উচ্চতার 100%
এখন ডেস্কটপ বা ল্যাপটপে ভিউ পোর্ট 100vh সঠিক উচ্চতা দেখালেও মোবাইলে সঠিক উচ্চতা দেখায় না, নিচের বাম পাশে ছবির দিকে যদি লক্ষ করি তাহলে আমাদের বুঝতে আরো সহজ হবে
এটার কারণটা হচ্ছে, আমরা যদি মোবাইল ব্রাউজারে গিয়ে স্ক্রল করি তাহলে মোবাইল অতিরিক্ত অ্যাড্রেস বারটি দেখতে পাবো আবার কিছু কিছু মোবাইলে স্ক্রল করতে হয় না সব সময়ই ভিসিবল থাকে। আর এই অ্যাড্রেস বারটির জন্য মোবাইল ব্রাউজারে vh এর উচ্চতার মান পরিবর্তন হয়ে যায়। যার রেজাল্ট আমরা বাম পাশের ছবিতে দেখতে পাচ্ছি
যেভাবে এই সমস্যা সমাধান করা যায়:
প্রথমে আমাদের সিএসএস এর একটি কাস্টম ভ্যারিয়েবল ডিফাইন করতে হবে। এখানে আমাদের কাস্টম ভ্যারিয়েবল হলো –vh
For 100vh
.my-div {
height: 100vh; /* Fallback for browsers that do not support Custom Properties */
height: calc(var(--vh, 1vh) * 100);
}
এবার আমরা JavaScript দিয়ে বাকি কাজটা করবো
// First we get the viewport height and we multiple it by 1% to get a value for a vh unit
let vh = window.innerHeight * 0.01;
// Then we set the value in the --vh custom property to the root of the document
document.documentElement.style.setProperty('--vh', `${vh}px`);
এখানে প্রথমে window.innerHeight দিয়ে ভিউ পোর্ট এর উচ্চতার মান নেওয়া হয়েছে, এরপর ওই মানকে 0.01 দ্বারা গুন করা হয়েছে। যাতে 1vh এর জন্য সঠিক উচ্চতার মান কি হবে সেটা পাওয়া যায়। আর ভ্যালুটি আমরা vh নামে একটা ভ্যারিয়েবলে ডিফাইন করেছি
এরপর document.documentElement.style.setProperty দ্বারা সিএসএস এর কাস্টম ভ্যারিয়েবল –vh আপডেট হবে এবং সঠিক উচ্চতার সিএসএস ও আপডেট হয়ে যাবে। বিস্তারিত এই লিঙ্কে
Explore More: Understanding the Difference Between REM and PX: Choosing the Right Unit for Web Design, Ultimate Next.js Setup: 7 Optimized Tips for Performance, Caching, and Modern Web Development, Power of Webpack: A introduction and guide, Front-end Development: A Foundation for Web Development Success
