ตลอดหลายปีที่ผ่านมา เบราว์เซอร์ในอุปกรณ์เคลื่อนที่มีการหน่วงเวลา 300-350 มิลลิวินาทีระหว่าง touchend ถึง click ในระหว่างที่รอเพื่อดูว่าการแตะสองครั้งนั้นจะเป็นการแตะสองครั้งหรือไม่ เนื่องจากการแตะสองครั้งเป็นท่าทางสัมผัสเพื่อซูมข้อความ
นับตั้งแต่มี Chrome สำหรับ Android รุ่นแรก เราก็ได้นำการหน่วงเวลานี้ออกหากมีการปิดใช้การซูมแบบบีบด้วย อย่างไรก็ตาม การบีบซูมเป็นฟีเจอร์การช่วยเหลือพิเศษที่สำคัญ ใน Chrome 32 (เมื่อปี 2014) ความล่าช้านี้จะหายไปสำหรับเว็บไซต์ที่เพิ่มประสิทธิภาพสำหรับอุปกรณ์เคลื่อนที่ โดยไม่ต้องนำการซูมแบบบีบออก หลังจากนั้นไม่นาน Firefox และ IE/Edge ก็พบปัญหาเดียวกันนี้ และในเดือนมีนาคม 2016 ก็พบการแก้ไขที่คล้ายกันใน iOS 9.3
ประสิทธิภาพแตกต่างกันอย่างมาก
การมี UI ที่ตอบสนองได้ทันทีหมายความว่าผู้ใช้จะกดปุ่มแต่ละปุ่มได้อย่างรวดเร็วด้วยความมั่นใจ แทนที่จะหยุดชั่วคราวและรอคำตอบ ดูข้อมูลเพิ่มเติมเกี่ยวกับผลกระทบของเวลารีแอ็กชันของมนุษย์และประสิทธิภาพบนเว็บได้ในข้อมูลเบื้องต้นเกี่ยวกับ RAIL
หากต้องการนำการหน่วงเวลาการแตะ 300-350 มิลลิวินาทีออก สิ่งที่คุณต้องมีคือใน <head> ของหน้าเว็บ
<meta name="viewport" content="width=device-width">
การดำเนินการนี้จะกำหนดความกว้างของวิวพอร์ตให้เท่ากับอุปกรณ์ และโดยทั่วไปเป็นแนวทางปฏิบัติที่ดีที่สุดสำหรับเว็บไซต์ที่ปรับให้เหมาะกับอุปกรณ์เคลื่อนที่ ด้วยแท็กนี้ เบราว์เซอร์จะถือว่าคุณได้ทำให้ข้อความอ่านได้บนอุปกรณ์เคลื่อนที่แล้ว และฟีเจอร์แตะสองครั้งเพื่อซูมจึงลดลงและมักได้รับการคลิกที่เร็วขึ้น
หากทำการเปลี่ยนแปลงนี้ไม่ได้ด้วยเหตุผลบางประการ คุณสามารถใช้ touch-action: manipulation เพื่อให้มีผลเดียวกันทั้งในหน้าเว็บหรือในองค์ประกอบบางรายการ ดังนี้
html {
touch-action: manipulation;
}
เทคนิคนี้ไม่รองรับใน Safari ระบบจึงแนะนำให้ใช้แท็กวิวพอร์ตมากกว่า
การสูญเสียการแตะสองครั้งเพื่อซูมเป็นข้อกังวลเกี่ยวกับการช่วยเหลือพิเศษใช่ไหม
ไม่ การบีบซูมยังคงใช้งานได้ และฟีเจอร์ของระบบปฏิบัติการก็พร้อมให้บริการสำหรับผู้ใช้ที่ใช้งานท่าทางสัมผัสนี้ได้ยาก ท่าทางสัมผัสการขยายใน Android จะจัดการเรื่องนี้เอง เครื่องมือเช่นนี้ทำงานได้แม้อยู่นอกเบราว์เซอร์
แล้วเบราว์เซอร์รุ่นเก่าล่ะ
FastClick by FT Labs ใช้เหตุการณ์การแตะเพื่อกระตุ้นให้เกิดการคลิกเร็วขึ้นและนำท่าทางสัมผัสการแตะสองครั้งออก โดยจะดูจำนวนนิ้วที่ย้ายระหว่าง touchstart ถึง touchend เพื่อแยกความแตกต่างระหว่างการเลื่อนและแตะ
การเพิ่ม Listener touchstart ลงในทุกอย่างล้วนส่งผลต่อประสิทธิภาพ เนื่องจากการโต้ตอบระดับล่าง เช่น การเลื่อนจะล่าช้า เนื่องจากการเรียก Listener เพื่อดูว่า event.preventDefault() วินาทีหรือไม่ โชคดีที่ FastClick จะหลีกเลี่ยงการตั้งค่า Listener ในกรณีที่เบราว์เซอร์ลบการหน่วงเวลา 300 มิลลิวินาทีออกไปแล้ว คุณจึงได้รับประโยชน์สูงสุดจากทั้งสองที่!