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