স্ক্রিন সাইজ ডিটেক্টর
তাৎক্ষণিকভাবে ভিউপোর্ট সাইজ ও স্ক্রিন রেজোলিউশন শনাক্ত করুন। ব্রাউজার রিসাইজ করার সাথে সাথে মাত্রা রিয়েল-টাইমে আপডেট হয়। বিনামূল্যে, ১০০% ব্রাউজারে।
তথ্যসূত্র
ভিউপোর্ট বনাম স্ক্রিন রেজোলিউশন — পার্থক্য কী?
ভিউপোর্ট হলো ব্রাউজার উইন্ডোর ভিতরে ওয়েব পেজের দৃশ্যমান এলাকা, CSS পিক্সেলে পরিমাপিত (window.innerWidth × window.innerHeight)। ব্রাউজার রিসাইজ বা DevTools খুললে এটি পরিবর্তিত হয়। স্ক্রিন রেজোলিউশন হলো আপনার ফিজিক্যাল ডিসপ্লের মোট পিক্সেল সংখ্যা (screen.width × screen.height) — এটি আপনার হার্ডওয়্যার এবং ডিসপ্লে সেটিংস দ্বারা নির্ধারিত। রেসপন্সিভ ওয়েব ডিজাইনের জন্য, ভিউপোর্টই গুরুত্বপূর্ণ — এটি নির্ধারণ করে কোন CSS মিডিয়া কোয়েরি এবং ব্রেকপয়েন্ট সক্রিয়।
ডিভাইস পিক্সেল রেশিও (DPR) কী?
ডিভাইস পিক্সেল রেশিও (DPR) বলে কতটি ফিজিক্যাল (হার্ডওয়্যার) পিক্সেল একটি CSS পিক্সেলে ম্যাপ হয়। 1-এর DPR মানে 1:1 ম্যাপিং (মানক ডিসপ্লে)। 2-এর DPR মানে Retina/HiDPI ডিসপ্লে — প্রতিটি CSS পিক্সেল 4টি ফিজিক্যাল পিক্সেলে (2×2) রেন্ডার হয়, তীক্ষ্ণ টেক্সট ও ইমেজ তৈরি করে। 3-এর DPR হাই-এন্ড স্মার্টফোনে সাধারণ। এটি গুরুত্বপূর্ণ: হাই-DPR স্ক্রিনে @2x/@3x ইমেজ সার্ভ করা, Retina ডিসপ্লেতে স্ক্রিনশট কেন প্রত্যাশিত রেজোলিউশনের দ্বিগুণ তা বোঝা, এবং নির্দিষ্ট DPR মানে দেখা যায় এমন লেআউট সমস্যা ডিবাগ করা।
স্ক্রিন ডিটেকশনের ব্যবহারের ক্ষেত্র
রেসপন্সিভ ডিজাইন পরীক্ষা — DevTools না খুলে সঠিক ভিউপোর্ট প্রস্থে CSS ব্রেকপয়েন্ট সক্রিয় হচ্ছে কিনা যাচাই করুন। বাগ রিপোর্ট — ডেভেলপারদের কাছে ডিসপ্লে সমস্যা রিপোর্ট করার সময় সঠিক ভিউপোর্ট মাত্রা, স্ক্রিন রেজোলিউশন এবং DPR শেয়ার করুন। স্ক্রিনশট পরিকল্পনা — ডকুমেন্টেশন বা অ্যাপ স্টোর তালিকার জন্য স্ক্রিনশট নেওয়ার আগে সঠিক মাত্রা জানুন। বিজ্ঞাপন ও ব্যানার সাইজিং — ডিসপ্লে বিজ্ঞাপনের জন্য প্রয়োজনীয় বিজ্ঞাপন স্লট সাইজের সাথে ভিউপোর্ট মাত্রা মেলে কিনা যাচাই করুন।
গোপনীয়তা
স্ক্রিনের মাত্রা আপনার ব্রাউজার থেকে স্থানীয়ভাবে পড়া হয়। কোনো ডেটা সার্ভারে পাঠানো হয় না।