যখন আপনার নকশাটি মোবাইল ডিভাইসে প্রদর্শিত হবে, তখন নিশ্চিত করুন যে বোতাম বা লিঙ্কের মতো ইন্টারেক্টিভ উপাদানগুলি যথেষ্ট বড় এবং তাদের চারপাশে পর্যাপ্ত জায়গা রয়েছে। এটি ব্যবহারকারীদের জন্য অন্য উপাদানগুলির উপর দুর্ঘটনাক্রমে ওভারল্যাপ না করে চাপ দেওয়া সহজ করে তোলে। এটি সমস্ত ব্যবহারকারীর জন্য উপকারী, তবে বিশেষ করে যাদের মোটর প্রতিবন্ধকতা রয়েছে তাদের জন্য এটি বিশেষভাবে সহায়ক।
সঠিকভাবে সেট করা মোবাইল ভিউপোর্ট সহ একটি সাইটে, সর্বনিম্ন প্রস্তাবিত টাচ টার্গেট সাইজ হল প্রায় ৪৮টি ডিভাইস-স্বাধীন পিক্সেল। উদাহরণস্বরূপ, একটি আইকনের প্রস্থ এবং উচ্চতা মাত্র ২৪ পিক্সেল হতে পারে, তবে ট্যাপ টার্গেট সাইজ ৪৮ পিক্সেল পর্যন্ত বাড়ানোর জন্য আপনি অতিরিক্ত প্যাডিং ব্যবহার করতে পারেন। ৪৮x৪৮ পিক্সেল এরিয়া প্রায় ৯ মিমি, যা একজন ব্যক্তির আঙুলের প্যাড এরিয়ার আকারের সমান।
স্পর্শ লক্ষ্যবস্তুগুলিকে অনুভূমিক এবং উল্লম্বভাবে প্রায় 8 পিক্সেল দূরে রাখা উচিত, যাতে ব্যবহারকারীর একটি ট্যাপ লক্ষ্যবস্তুতে চাপ দেওয়ার সময় আঙুলটি অসাবধানতাবশত অন্য একটি ট্যাপ লক্ষ্যবস্তুতে স্পর্শ না করে।
আপনার স্পর্শ লক্ষ্যগুলি পরীক্ষা করুন
যদি আপনার লক্ষ্য টেক্সট হয় এবং আপনি টেক্সট এবং যেকোনো প্যাডিং আকার দেওয়ার জন্য em বা rem এর মতো আপেক্ষিক মান ব্যবহার করে থাকেন, তাহলে আপনি ডেভেলপার টুল ব্যবহার করে পরীক্ষা করতে পারেন যে সেই এলাকার গণনা করা মান যথেষ্ট বড়।
লিঙ্কটি পরীক্ষা করুন। Chrome DevTools-এ Computed প্যানে যান যেখানে আপনি বাক্সের বিভিন্ন অংশ পরীক্ষা করতে পারেন এবং দেখতে পারেন যে তারা কোন পিক্সেল আকারে সমাধান করেছে। Firefox DevTools-এ একটি লেআউট প্যানেল রয়েছে। সেই প্যানেলে আপনি পরিদর্শন করা উপাদানের প্রকৃত আকার পাবেন।
মিডিয়া কোয়েরি ব্যবহার করে টাচস্ক্রিন সনাক্ত করুন
ভিউপোর্টের মাত্রা পরীক্ষা করা এবং ফোন বা ট্যাবলেট হতে পারে এমন ছোট মাত্রা অনুমান করার পরিবর্তে, প্রকৃত ডিভাইসের ক্ষমতার উপর ভিত্তি করে আপনার নকশাকে অভিযোজিত করার আরও শক্তিশালী উপায় রয়েছে।
মিডিয়া কোয়েরির মাধ্যমে, আমরা সনাক্ত করতে পারি যে ব্যবহারকারীর প্রাথমিক ইনপুট টাচস্ক্রিন ( pointer ) কিনা এবং সনাক্ত করা ইনপুটগুলির মধ্যে কোনটি টাচস্ক্রিন ( any-pointer ) কিনা। pointer এবং any-pointer বৈশিষ্ট্যগুলি fine বা coarse দেখায়। একটি সূক্ষ্ম পয়েন্টার নির্দেশ করে যে ব্যবহারকারীর একটি মাউস বা ট্র্যাকপ্যাড রয়েছে। যদি মাউসটি ব্লুটুথের মাধ্যমে একটি ফোন বা ট্যাবলেটের সাথে সংযুক্ত থাকে তবে এটি এখনও সত্য। একটি coarse পয়েন্টার একটি টাচস্ক্রিন নির্দেশ করে, যা যেকোনো আকার বা ধরণের ডিভাইস হতে পারে।
যদি আপনি টাচ টার্গেট বাড়ানোর জন্য একটি মিডিয়া কোয়েরি যোগ করেন, তাহলে একটি মোটা পয়েন্টারের জন্য পরীক্ষা করুন যাতে আপনি সমস্ত টাচস্ক্রিন ব্যবহারকারীদের জন্য ট্যাপ টার্গেট বাড়াতে পারেন, তারা যে ডিভাইসই ব্যবহার করুক না কেন।
.container a {
padding: .2em;
}
@media (any-pointer: coarse) {
.container a {
padding: .8em;
}
}
রেসপন্সিভ ওয়েব ডিজাইন বেসিকস- এ pointer মতো ইন্টারঅ্যাকশন মিডিয়া বৈশিষ্ট্যগুলি সম্পর্কে আরও জানুন।