เป็นเวลาหลายปีที่เบราว์เซอร์บนอุปกรณ์เคลื่อนที่ใช้การหน่วงเวลา 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 โดย FT Labs ใช้เหตุการณ์การสัมผัสเพื่อทริกเกอร์การคลิกให้เร็วขึ้นและนำท่าทางสัมผัสการแตะสองครั้งออก โดยจะดูที่ระยะนิ้วที่เคลื่อนไหวระหว่าง touchstart
ถึง touchend
เพื่อแยกแยะการเลื่อนและการแตะ
การเพิ่ม touchstart
listener ให้กับทุกอย่างจะส่งผลต่อประสิทธิภาพ เนื่องจากการโต้ตอบระดับล่าง เช่น การเลื่อน จะล่าช้าโดยการเรียก listener เพื่อดูว่า event.preventDefault()
หรือไม่ แต่ไม่ต้องกังวล FastClick จะหลีกเลี่ยงการตั้งค่า Listeners ในกรณีที่เบราว์เซอร์นำการหน่วงเวลา 300 มิลลิวินาทีออกแล้ว คุณจึงได้รับประโยชน์จากทั้ง 2 อย่าง