জাভাস্ক্রিপ্ট দিয়ে স্ক্রিন প্রস্থ নির্দিষ্ট ভ্যালুর চেয়ে বড় বা ছোট কিনা ডিটেক্ট করার পদ্ধতি শিখুন।
কখনো কখনো আপনি একটি কন্ডিশন ভিত্তিক করে কোড এক্সিকিউট করতে চান।
হয়তো কিছু কোড আছে যা আপনি বড় স্ক্রিনে দেখাতে চান কিন্তু ছোট স্ক্রিনে (যেমন অধিকাংশ স্মার্টফোন) না দেখাতে চান তাদের সীমিত রিয়েল এস্টেটের কারণে।
নির্দিষ্ট ডিভাইস টাইপ ডিটেকশন হ্যান্ডল করা একটি জটিল বিষয়, যা ডেভেলপাররা একমত হয় না। ঘন্টার পর ঘন্টা রিসার্চ করার পরও আমি এখনো পর্যাপ্ত বিশ্বস্ত ডেটা জোগাড়ো করতে পারিনি (চলতে থাকবে..)।
পিক্সেল ভ্যালু ভিত্তিক স্ক্রিন প্রস্থ ডাইনামিকভাবে ডিটেক্ট করা
সৌভাগ্যয়, পিক্সেল ভ্যালু ভিত্তিক স্ক্রিন সাইজ টার্গেট করা অনেক সহজ, এবং এটি একটি ফিচার যা আপনি অনেক পরিস্থিতিতে উপকারে লাগাতে পারবেন।
নিচের কোডটি আপনার ব্রাউজার কনসোলে বা CodePen-এর মত অনলাইন এডিটরে পেস্ট করুন:
window.addEventListener("resize", function() { if (window.matchMedia("(min-width: 500px)").matches) { console.log("Screen width is at least 500px") } else { console.log("Screen less than 500px") } })এখন আপনার ব্রাউজার উইন্ডোকে ন্যারো থেকে واয়ড আকারে রিসাইজ করুন এবং কনসোল লগ আউটপুট পর্যবেক্ষণ করুন।
জাভাস্ক্রিপ্ট কোডটি কীভাবে কাজ করে:
- প্রথমে, আমরা উইন্ডো অবজেক্টে
addEventListener()মেথড আট্যাচ করি। - ইভেন্ট লিসেনারের ভিতরে আমরা দুটি আর্গুমেন্ট সেট আপ করি,
'resize'এবংfunction() {}। - প্রথম আর্গুমেন্টটি ইভেন্ট লিসেনারকে রিসাইজ ইভেন্টের জন্য শুনতে বলে (রিসাইজিং-এর একদম ছোট অংশই ইভেন্ট হিসেবে রেজিস্টার হবে)। তারপর রিসাইজ ইভেন্টের ভিত্তিক একটি বেনামী ফাংশন রান করানো হয়।
- বেনামী ফাংশনের বডির ভিতরে, আমরা দুটি কন্ডিশনাল স্টেটমেন্ট শুরু করি।
- প্রথম কন্ডিশন: "যদি স্ক্রিন প্রস্থ (যেকোনো ডিভাইসের) কমপক্ষে 500px হয়, তবে console.log('do something')।" দ্বিতীয় কন্ডিশন: "যদি স্ক্রিন প্রস্থ 500px-এর চেয়ে কম হয়, তবে console.log('do something else')।"
CodePen-এ কোডটি নিয়ে খেলুন
