במשך שנים רבות, דפדפנים לנייד החילו עיכוב של 300-350 אלפיות השנייה בין touchend ל-click בזמן שהמתינו כדי לראות אם זו תהיה הקשה כפולה או לא, מאחר שהקשה כפולה הייתה תנועה להגדלת הטקסט.
מאז הפרסום הראשון של Chrome ל-Android, העיכוב הזה הוסר אם גם שינוי מרחק התצוגה באמצעות צביטה הושבת. יחד עם זאת, שינוי מרחק התצוגה באמצעות צביטה הוא תכונת נגישות חשובה. החל מגרסה 32 של Chrome (בשנת 2014), העיכוב הזה נעלם באתרים שעברו אופטימיזציה לניידים, מבלי להסיר את שינוי מרחק התצוגה באמצעות צביטה! Firefox ו-IE/Edge עשו זאת זמן קצר לאחר מכן, ובמרץ 2016 תיקון דומה הגיע ב-iOS 9.3.
ההבדל בביצועים עצום!
ממשק משתמש שמגיב באופן מיידי מאפשר למשתמשים ללחוץ בביטחון במהירות על כל לחצן, במקום להשהות ולחכות לתשובה. מידע נוסף על ההשפעה של זמני תגובה אנושיים ועל ביצועי האינטרנט זמין במבוא ל-RAIL.
כדי להסיר את עיכוב ההקשה של 300-350 אלפיות השנייה, כל מה שדרוש לך ב<head> של הדף:
<meta name="viewport" content="width=device-width">
הגדרה זו מגדירה את רוחב אזור התצוגה כך שיהיה זהה לזה של המכשיר, ובדרך כלל זוהי שיטה מומלצת לאתרים מותאמים לניידים. באמצעות התג הזה, הדפדפנים מניחים שהפכת את הטקסט לקריא בנייד, והתכונה 'הקשה כפולה לשינוי מרחק התצוגה' נעצרת לטובת קליקים מהירים יותר.
אם מסיבה כלשהי אין לך אפשרות לבצע את השינוי, אפשר להשתמש ב-touch-action: manipulation כדי להשיג את אותה אפקט בכל הדף או ברכיבים מסוימים:
html {
touch-action: manipulation;
}
השיטה הזו לא נתמכת ב-Safari, ולכן עדיף להשתמש בתג של אזור התצוגה.
האם האפשרות 'הקשה כפולה לשינוי מרחק התצוגה' היא בעיית נגישות?
לא. שינוי מרחק התצוגה באמצעות תנועת צביטה ממשיך לפעול, ותכונות מערכת ההפעלה מתאימות למשתמשים שמתקשים לבצע את התנועה הזו. ב-Android, אפשר לפתור את הבעיה באמצעות תנועות הגדלה. כלים כאלה פועלים גם מחוץ לדפדפן.
מה לגבי דפדפנים ישנים?
FastClick של FT Labs משתמש באירועי מגע כדי להפעיל קליקים מהר יותר ומסיר את תנועת ההקשה הכפולה. הוא בוחן את תנועת האצבע שלך בין touchstart ל-touchend כדי להבדיל בין גלילות להקשות.
להוספת מאזין של touchstart לכל דבר יש השפעה על הביצועים, מפני שאינטראקציות ברמות נמוכות יותר, כמו גלילה, מתעכבות על ידי קריאה למאזינים כדי לבדוק אם היא event.preventDefault(). למרבה המזל, FastClick יימנע מהגדרת פונקציות listener במקרים שבהם הדפדפן כבר מבטל את ההשהיה של 300 אלפיות השנייה, כך שתוכל ליהנות משניהם!