জাভাস্ক্রিপ্টে স্ক্রিনের প্রস্থ একটি মানের চেয়ে বেশি বা কম কিনা তা কীভাবে সনাক্ত করবেন

জাভাস্ক্রিপ্টে একটি স্ক্রিনের প্রস্থ একটি নির্দিষ্ট মানের চেয়ে বেশি বা কম কিনা তা শনাক্ত করতে শিখুন৷

কখনও কখনও আপনি একটি শর্তের উপর ভিত্তি করে কোড নির্বাহ করতে চান।

এমন কিছু কোড থাকতে পারে যা আপনি বড় স্ক্রিনে দেখাতে চান কিন্তু ছোট স্ক্রিনে (অধিকাংশ স্মার্টফোনের মতো) তাদের সীমিত রিয়েল এস্টেটের কারণে নয়৷

নির্দিষ্ট ডিভাইস প্রকার সনাক্তকরণ পরিচালনা করা একটি জটিল এলাকা, যা ডেভেলপাররা একমত হতে পারে না। কয়েক ঘন্টা গবেষণার পরে, আমি এখনও কাগজে কলম রাখার জন্য যথেষ্ট বিশ্বাসযোগ্য ডেটা সংগ্রহ করতে পারিনি (চলবে...)।

কিভাবে পিক্সেলে স্ক্রিনের প্রস্থ গতিশীলভাবে সনাক্ত করা যায়

সৌভাগ্যবশত, পিক্সেল মানগুলির উপর ভিত্তি করে স্ক্রীনের আকারগুলি লক্ষ্য করা অনেক সহজ এবং এটি এমন একটি বৈশিষ্ট্য যা আপনি অনেক পরিস্থিতিতে উপকৃত হবেন৷

নিম্নলিখিত কোডটি আপনার ব্রাউজার কনসোলে বা কোডপেনের মতো একটি অনলাইন সম্পাদকে আটকান:

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('কিছু কিছু করুন')"। দ্বিতীয় শর্ত: “যদি স্ক্রিনের প্রস্থ 500px-এর কম হয়, তাহলে console.log('অন্য কিছু করুন')”৷

কোডপেন