เป็นเวลาหลายปีแล้วที่เบราว์เซอร์ในอุปกรณ์เคลื่อนที่ใช้การหน่วงเวลา 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">
ซึ่งจะตั้งค่าความกว้างของวิวพอร์ตให้เท่ากับอุปกรณ์ และโดยทั่วไปจะเป็นแนวทางปฏิบัติที่ดีที่สุดสำหรับเว็บไซต์ที่เพิ่มประสิทธิภาพสำหรับอุปกรณ์เคลื่อนที่ เมื่อใช้แท็กนี้ เบราว์เซอร์จะถือว่าคุณทำให้ข้อความอ่านได้บนอุปกรณ์เคลื่อนที่ และฟีเจอร์แตะเพื่อซูม 2 ครั้งจะถูกเลิกใช้เพราะคลิกได้รวดเร็วยิ่งขึ้น
หากทำการเปลี่ยนแปลงนี้ไม่ได้ไม่ว่าจะด้วยเหตุผลใดก็ตาม คุณสามารถใช้ touch-action: manipulation เพื่อให้เกิดผลลัพธ์เดียวกันทั้งในหน้าเว็บหรือองค์ประกอบที่เฉพาะเจาะจง ดังนี้
html {
touch-action: manipulation;
}
Safari ยังไม่รองรับเทคนิคนี้ จึงขอแนะนำให้ใช้แท็กวิวพอร์ต
การสูญเสียการแตะเพื่อซูมเป็นปัญหาไหม
ไม่ได้ การซูมแบบบีบจะทำงานต่อไป และฟีเจอร์ของระบบปฏิบัติการรองรับผู้ใช้ที่ท่าทางสัมผัสนี้ได้ยาก ท่าทางสัมผัสการขยายจะช่วยแก้ไขปัญหาใน Android เครื่องมือเช่นนี้ทำงานได้นอกเบราว์เซอร์
แล้วเบราว์เซอร์รุ่นเก่าล่ะ
FastClick โดย FT Labs ใช้เหตุการณ์การแตะเพื่อทริกเกอร์การคลิกให้เร็วขึ้นและนำท่าทางสัมผัสการแตะสองครั้งออก ซึ่งจะดูระดับที่คุณลากนิ้วไปมาระหว่าง touchstart กับ touchend เพื่อแยกความแตกต่างระหว่างการเลื่อนและการแตะ
การเพิ่ม Listener touchstart ลงในทุกอย่างจะมีผลต่อประสิทธิภาพ เนื่องจากการโต้ตอบในระดับที่ต่ำลง เช่น การเลื่อนจะล่าช้าด้วยการเรียก Listener ว่า event.preventDefault() หรือไม่ โชคดีที่ FastClick จะหลีกเลี่ยงการตั้งค่า Listener กรณีที่เบราว์เซอร์นำการหน่วงเวลา 300 มิลลิวินาทีออกอยู่แล้ว คุณจึงทำงานได้เต็มประสิทธิภาพ