เมื่องานออกแบบของคุณแสดงบนอุปกรณ์เคลื่อนที่ คุณควรตรวจสอบว่าองค์ประกอบแบบอินเทอร์แอกทีฟอย่างปุ่มหรือลิงก์มีขนาดใหญ่พอและมีพื้นที่ว่างรอบๆ มากพอเพื่อให้กดได้ง่ายๆ โดยไม่ซ้อนทับกับองค์ประกอบอื่นๆ โดยไม่ตั้งใจ ซึ่งจะเป็นประโยชน์ต่อผู้ใช้ทุกคน แต่จะเป็นประโยชน์อย่างยิ่งสำหรับผู้ที่มีความบกพร่องทางการเคลื่อนไหว
ขนาดเป้าหมายการสัมผัสขั้นต่ำที่แนะนำคือพิกเซลอิสระประมาณ 48 พิกเซลในเว็บไซต์ที่มีการตั้งค่าวิวพอร์ตสำหรับอุปกรณ์เคลื่อนที่อย่างเหมาะสม เช่น แม้ว่าไอคอนจะมีความกว้างและความสูงเพียง 24 พิกเซลเท่านั้น แต่คุณสามารถใช้ระยะห่างจากขอบเพิ่มเติมเพื่อทำให้เป้าหมายการแตะมีขนาดได้สูงสุด 48 พิกเซล พื้นที่ 48x48 พิกเซลจะสอดคล้องกับขนาดประมาณ 9 มม. ซึ่งเกี่ยวกับขนาดพื้นที่แผ่นนิ้วของคน
ในการสาธิต เราได้เพิ่มระยะห่างจากขอบให้กับทุกลิงก์เพื่อให้เป็นไปตามขนาดขั้นต่ำ
นอกจากนี้ เป้าหมายการสัมผัสควรเว้นระยะห่างประมาณ 8 พิกเซล ทั้งในแนวนอนและแนวตั้งเพื่อไม่ให้นิ้วของผู้ใช้ที่กดบนเป้าหมายการแตะหนึ่งๆ ไม่ไปสัมผัสเป้าหมายการแตะอื่นโดยไม่ได้ตั้งใจ
การทดสอบเป้าหมายการสัมผัส
หากเป้าหมายคือข้อความและคุณได้ใช้ค่าสัมพัทธ์ เช่น em
หรือ rem
เพื่อปรับขนาดข้อความและระยะห่างจากขอบ คุณสามารถใช้เครื่องมือสำหรับนักพัฒนาเว็บเพื่อตรวจสอบว่าค่าที่คำนวณของพื้นที่ดังกล่าวมีขนาดใหญ่พอ
ในตัวอย่างด้านล่าง ฉันใช้ em
สำหรับข้อความและระยะห่างจากขอบ
ตรวจสอบ a
ของลิงก์ และใน Chrome DevTools ให้เปลี่ยนไปที่แผงที่คำนวณ ซึ่งคุณสามารถตรวจสอบส่วนต่างๆ ของช่องและดูว่ามีการแก้ไขเป็นขนาดพิกเซลเท่าใด
ใน Firefox DevTools จะมีแผงเลย์เอาต์
คุณจะเห็นขนาดจริงขององค์ประกอบที่ตรวจสอบในแผงนั้น
การใช้การค้นหาสื่อเพื่อตรวจหาการใช้หน้าจอสัมผัส
แทนที่จะทดสอบแค่ขนาดวิวพอร์ตแล้วเดาว่าขนาดขนาดเล็กน่าจะเป็นโทรศัพท์หรือแท็บเล็ต แล้วก็ใช้หน้าจอสัมผัส แต่ปัจจุบันมีวิธีที่มีประสิทธิภาพมากขึ้นในการปรับการออกแบบตามความสามารถจริงของอุปกรณ์
ฟีเจอร์สื่ออย่างหนึ่งที่เราทดสอบกับคำค้นหาสื่อได้แล้วตอนนี้คืออินพุตหลักของผู้ใช้เป็นหน้าจอสัมผัส (pointer
) และอินพุตที่ตรวจพบในปัจจุบันเป็นหน้าจอสัมผัส (any-pointer
) หรือไม่ (any-pointer
) ฟีเจอร์ pointer
และ any-pointer
จะคืนค่า fine
หรือ coarse
ตัวชี้แบบละเอียดจะเป็นคนที่ใช้เมาส์หรือแทร็กแพด
แม้ว่าเมาส์ตัวนั้นจะมีการเชื่อมต่อผ่านบลูทูธกับโทรศัพท์ก็ตาม
ตัวชี้ coarse
บ่งชี้ถึงหน้าจอสัมผัส
ซึ่งอาจเป็นอุปกรณ์เคลื่อนที่แต่อาจเป็นหน้าจอแล็ปท็อปหรือแท็บเล็ตขนาดใหญ่ด้วย
ถ้าคุณกำลังปรับ CSS ภายในคิวรี่สื่อเพื่อเพิ่มเป้าหมายการสัมผัส การทดสอบตัวชี้แบบคร่าวๆ จะช่วยให้คุณสามารถเพิ่มเป้าหมายการแตะสำหรับผู้ใช้หน้าจอสัมผัสทั้งหมด ซึ่งจะช่วยให้มีพื้นที่การแตะมากขึ้น ไม่ว่าโทรศัพท์จะเป็นโทรศัพท์หรืออุปกรณ์ขนาดใหญ่กว่า
.container a {
padding: .2em;
}
@media (any-pointer: coarse) {
.container a {
padding: .8em;
}
}
ดูข้อมูลเพิ่มเติมเกี่ยวกับฟีเจอร์สื่อเพื่อการโต้ตอบได้ เช่น ตัวชี้ในบทความพื้นฐานการออกแบบเว็บที่ตอบสนองตามอุปกรณ์