تاخیر ۳۰۰ میلی ثانیه ای ضربه انگشت
برای سالها، مرورگرهای موبایل بین touchend
و click
یک تأخیر ۳۰۰-۳۵۰ میلیثانیهای اعمال میکردند تا ببینند آیا این یک ضربه دوباره است یا خیر، زیرا ضربه دوباره یک حرکت برای بزرگنمایی متن بود.
از زمان اولین انتشار Chrome برای اندروید، اگر بزرگنمایی با دو انگشت نیز غیرفعال بود، این تأخیر حذف میشد. با این حال، بزرگنمایی با دو انگشت یک ویژگی مهم دسترسی است. از Chrome 32 (در سال ۲۰۱۴) این تأخیر برای سایتهای بهینه شده برای موبایل حذف شده است، بدون حذف بزرگنمایی با دو انگشت! Firefox و IE/Edge نیز اندکی بعد همین کار را انجام دادند و در مارس ۲۰۱۶ یک اصلاح مشابه در iOS 9.3 فرود آمد.
تفاوت عملکرد بسیار زیاد است!
داشتن یک رابط کاربری که فوراً پاسخ میدهد به این معنی است که کاربر میتواند با اطمینان هر دکمه را به سرعت فشار دهد، نه اینکه مکث کند و منتظر پاسخ باشد. در مورد تأثیر زمانهای واکنش انسان و عملکرد وب در مقدمه ما درباره RAIL اطلاعات بیشتری کسب کنید.
برای حذف تأخیر ضربه ۳۰۰-۳۵۰ میلیثانیهای، تنها چیزی که نیاز دارید موارد زیر در <head>
صفحه شما است:
<meta name="viewport" content="width=device-width">
این عرض دید را با عرض دستگاه تنظیم میکند و به طور کلی یک بهترین عمل برای سایتهای بهینه شده برای موبایل است. با این برچسب، مرورگرها فرض میکنند که متن را برای موبایل قابل خواندن کردهاید و ویژگی ضربه دوباره برای بزرگنمایی به نفع کلیکهای سریعتر حذف میشود.
اگر به هر دلیلی نمیتوانید این تغییر را انجام دهید، میتوانید از touch-action: manipulation
برای دستیابی به همان اثر در کل صفحه یا روی عناصر خاص استفاده کنید:
html {
touch-action: manipulation;
}
این تکنیک در Safari پشتیبانی نمیشود، بنابراین برچسب viewport
بسیار ترجیح داده میشود.
آیا از دست دادن بزرگنمایی با ضربه دوباره یک نگرانی دسترسی است؟
خیر. بزرگنمایی با دو انگشت همچنان کار میکند و ویژگیهای سیستم عامل برای کاربرانی که این حرکت را دشوار مییابند، مناسب است. در اندروید، ژستهای بزرگنمایی از آن مراقبت میکنند. ابزارهایی مانند این حتی خارج از مرورگر نیز کار میکنند.
در مورد مرورگرهای قدیمی چطور؟
FastClick توسط FT Labs از رویدادهای لمسی برای فعال کردن کلیکها سریعتر و حذف حرکت ضربه دوباره استفاده میکند. این مقدار حرکت انگشت شما بین touchstart
و touchend
را برای تمایز بین پیمایشها و ضربهها بررسی میکند.
اضافه کردن یک شنونده touchstart
به همه چیز تأثیر عملکردی دارد، زیرا تعاملات سطح پایینتر مانند پیمایش با فراخوانی شنونده برای بررسی اینکه آیا event.preventDefault()
میکند، به تأخیر میافتد. خوشبختانه، FastClick از تنظیم شنوندهها در مواردی که مرورگر در حال حاضر تأخیر ۳۰۰ میلیثانیهای را حذف میکند، خودداری میکند، بنابراین بهترینها را از هر دو دریافت میکنید!