เครื่องทดสอบที่รองรับการใช้งานบนมือถือได้

สิ่งที่ผู้ทดสอบตรวจสอบ

การกำหนดค่าของวิว (Viewport Configuration)

• มีรุ่น <meta name="viewport" content="width=device-width, initial-scale=1"> หรือไม่? หากไม่มีรุ่นนี้ โปรแกรมเบราว์เซอร์บนมือถือจะแสดงผลราวกับว่าโทรศัพท์มีความกว้างเท่ากับจอคอมพิวเตอร์ และจะปรับขนาดให้เข้ากันอย่างแคบจนทำให้ข้อความปรากฏในขนาดเล็กมาก

ขนาดตัวอักษร

• ข้อความที่มีขนาดเล็กกว่า 12 พิกเซล จะถูกแสดงเป็นสีพิเศษ, อ่านได้ยากบนโทรศัพท์หากไม่ใช้ฟีเจอร์ปรับขนาดด้วยการกดคู่นิ้ว
• คู่มือด้านสไตล์หลายฉบับแนะนำให้ใช้ขนาดตัวอักษรข้อความอย่างน้อย 16 พิกเซล การใช้คำบรรยายที่มีขนาดเล็กมากก็ไม่เป็นปัญหา แต่การใช้ขนาดตัวอักษร 11 พิกเซลสำหรับข้อความหลักนั้นไม่เหมาะสม

ขนาดของเป้าหมายที่ต้องแตะ

ปุ่ม ลิงก์ และองค์ประกอบควบคุมในแบบฟอร์มควรมีขนาดอย่างน้อย 48×48 พิกเซล (ตามแนวทางด้านความสามารถในการเข้าถึงสำหรับอุปกรณ์เคลื่อนที่ของ Google และ W3C) เป้าหมายที่มีขนาดเล็กจะยากต่อการแตะอย่างแม่นยำด้วยนิ้วหัวแม่มือ และจะถูกทำเครื่องหมายไว้

ระยะห่างระหว่างเป้าหมายที่ต้องแตะ

• เป้าหมายที่อยู่ใกล้กับเป้าหมายข้างเคียงมากกว่า 8 พิกเซล จะทำให้เกิดการแตะผิดพลาด โดยจะถูกระบุด้วยเครื่องหมายแยกต่างหาก

การเลื่อนข้อความในแนวนอน

เนื้อหาที่มีขนาดใหญ่เกินขอบหน้าจอจะทำให้ต้องเลื่อนแนวนอน ซึ่งส่งผลเสียต่อประสบการณ์การใช้งานบนมือถือ โดยทั่วไปเกิดจากภาพที่ไม่มีข้อมูล max-width: 100% หรือตารางที่ไม่สามารถปรับรูปแบบการแสดงผลได้อย่างเหมาะสม

ปลั๊กอินที่ไม่ได้รับการสนับสนุน

• Flash, Silverlight และ ActiveX ไม่สามารถใช้งานได้บนโทรศัพท์มือถือ โดยเว็บไซต์รุ่นเก่าบางแห่งยังคงอ้างอิงฟีเจอร์เหล่านี้อยู่

การโหลดฟอนต์

• ฟอนต์เว็บขนาดใหญ่มากที่ทำให้การแสดงผลล่าช้าเป็นเวลาหลายวินาที จะถูกระบุด้วยเครื่องหมาย

ทำไมเรื่องนี้ยังคงมีความสำคัญ

กูเกิลได้ยุติการใช้งานเครื่องมือทดสอบความเหมาะสมสำหรับอุปกรณ์เคลื่อนที่แบบแยกต่างหากในเดือนธันวาคม 2023 อย่างไรก็ตาม คุณสมบัติด้านความเหมาะสมสำหรับอุปกรณ์เคลื่อนที่ยังคงเป็นตัวชี้วัดการจัดอันดับโดยตรงผ่านตัวชี้วัดหลักของเว็บ (Core Web Vitals) และตัวชี้วัดประสบการณ์การใช้งานหน้าเว็บ การจัดทำดัชนีแบบเน้นอุปกรณ์เคลื่อนที่หมายความว่า กูเกิลจะสแกนเว็บไซต์ของคุณผ่านโทรศัพท์มือถือ และสิ่งที่แสดงผลไม่ดีบนอุปกรณ์เคลื่อนที่จะปรากฏในผลการจัดอันดับบนคอมพิวเตอร์เดสก์ท็อปด้วยเช่นกัน

วิธีแก้ไขทั่วไป

• เพิ่มข้อมูลเมตาของ viewport ลงใน <head> และ <meta name="viewport" content="width=device-width, initial-scale=1">
• CSS แบบตอบสนองต่อขนาดหน้าจอ โดยใช้คำสั่ง media query: @media (max-width: 768px) { ... }
• ใช้ Flexbox และ Grid แทนการจัดวางแบบความกว้างคงที่
• ตั้งค่าภาพ max-width: 100%; height: auto เพื่อให้ภาพหดตัวตามขนาดของช่องแสดงผล
• ทำให้ตารางสามารถเลื่อนดูได้บนหน้าจอขนาดเล็ก: ใช้ฟังก์ชัน wrapping ใน <div style="overflow-x: auto">
• ใช้ rem หรือ em เพื่อกำหนดขนาดข้อความ เพื่อให้ระบบปรับขนาดตามความต้องการของผู้ใช้งานทำงานได้อย่างถูกต้อง

สิ่งที่ผู้ทดสอบไม่สามารถตรวจพบได้

• ประสิทธิภาพบนฮาร์ดแวร์จริง: โทรศัพท์แอนดรอยด์ระดับเริ่มต้นที่ใช้เครือข่าย 3G มักเกิดความล่าช้าซึ่งเครื่องทดสอบนี้ไม่สามารถจำลองได้ ควรใช้โปรแกรม Lighthouse เพื่อประเมินประสิทธิภาพ
• การโต้ตอบผ่านการสัมผัส: ตัวเลือกแบบดรอปดาวน์ที่ใช้งานได้เฉพาะเมื่อวางเมาส์ไว้บนหน้าจอ และจะแสดงผลเมื่อมีการสัมผัส จำเป็นต้องทดสอบด้วยตนเองบนอุปกรณ์จริง
• ความสามารถในการเข้าถึงที่เกินกว่าเพียงการปรับขนาดหน้าจอสำหรับอุปกรณ์มือถือ ใช้เครื่องมือเฉพาะทางด้านความสามารถในการเข้าถึง เช่น การสร้างความแตกต่างของภาพ (contrast), การรองรับโปรแกรมอ่านหน้าจอ (screen reader), และระบบนำทางผ่านคีย์บอร์ด
• ข้อผิดพลาดของ JavaScript ในเบราว์เซอร์ที่ออกแบบเฉพาะสำหรับอุปกรณ์มือถือ Safari บนระบบ iOS อาจมีพฤติกรรมแตกต่างจากเวอร์ชันอื่นๆ ของ WebKit บางครั้ง