وقتی طرح شما روی دستگاه تلفن همراه نمایش داده می‌شود، مطمئن شوید که عناصر تعاملی، مانند دکمه‌ها یا لینک‌ها، به اندازه کافی بزرگ هستند و فضای کافی در اطراف خود دارند. این کار باعث می‌شود کاربران راحت‌تر بتوانند بدون همپوشانی تصادفی با عناصر دیگر، آن را فشار دهند. این به نفع همه کاربران است، اما به ویژه برای هر کسی که دارای اختلال حرکتی است، مفید است.
حداقل اندازه توصیه شده برای هدف لمسی در سایتی با نمای موبایل مناسب، حدود ۴۸ پیکسل مستقل از دستگاه است. برای مثال، در حالی که یک آیکون ممکن است فقط عرض و ارتفاع ۲۴ پیکسل داشته باشد، می‌توانید با استفاده از padding اضافی، اندازه هدف لمسی را تا ۴۸ پیکسل افزایش دهید. ناحیه ۴۸x۴۸ پیکسلی معادل حدود ۹ میلی‌متر است که تقریباً به اندازه ناحیه پد انگشت یک فرد است.
همچنین باید فاصله بین نقاط لمسی، چه به صورت افقی و چه به صورت عمودی، حدود ۸ پیکسل باشد تا انگشت کاربر هنگام فشار دادن یک نقطه، به طور ناخواسته نقطه لمسی دیگری را لمس نکند.
اهداف لمسی خود را آزمایش کنید
اگر هدف شما متن است و از مقادیر نسبی مانند em یا rem برای اندازه متن و هرگونه padding استفاده کرده‌اید، می‌توانید از ابزارهای توسعه‌دهنده برای بررسی اینکه مقدار محاسبه‌شده آن ناحیه به اندازه کافی بزرگ است یا خیر، استفاده کنید.
لینک را بررسی کنید. در DevTools کروم به پنل Computed بروید، جایی که می‌توانید بخش‌های مختلف کادر را بررسی کنید و ببینید که به چه اندازه پیکسلی تبدیل می‌شوند. در DevTools فایرفاکس یک پنل Layout وجود دارد. در آن پنل، اندازه واقعی عنصر بررسی شده را مشاهده می‌کنید.
تشخیص صفحه لمسی با استفاده از مدیا کوئری‌ها
به جای آزمایش ابعاد نمایشگر و حدس زدن ابعاد کوچک که احتمالاً مربوط به تلفن یا تبلت هستند، روش‌های قوی‌تری برای تطبیق طراحی شما بر اساس قابلیت‌های واقعی دستگاه وجود دارد.
با استفاده از کوئری‌های مدیا، می‌توانیم تشخیص دهیم که آیا ورودی اصلی کاربر صفحه لمسی ( pointer ) است و آیا هر یک از ورودی‌های شناسایی شده صفحه لمسی ( any-pointer ) است یا خیر. ویژگی‌های pointer و any-pointer fine یا coarse را برمی‌گردانند. یک fine pointer نشان می‌دهد که کاربر ماوس یا ترک‌پد دارد. این موضوع در صورتی که ماوس از طریق بلوتوث به تلفن یا تبلت متصل باشد نیز صادق است. یک coarse pointer نشان دهنده صفحه لمسی است که می‌تواند هر اندازه یا نوع دستگاهی داشته باشد.
اگر برای افزایش هدف لمسی، یک کوئری رسانه‌ای اضافه می‌کنید، آن را برای یک اشاره‌گر درشت آزمایش کنید تا بتوانید اهداف ضربه زدن را برای همه کاربران صفحه لمسی، صرف نظر از دستگاهی که استفاده می‌کنند، افزایش دهید.
.container a {
padding: .2em;
}
@media (any-pointer: coarse) {
.container a {
padding: .8em;
}
}
برای کسب اطلاعات بیشتر در مورد ویژگی‌های رسانه‌های تعاملی، مانند pointer ، به اصول اولیه طراحی وب واکنش‌گرا مراجعه کنید.