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