วิธีทำให้เว็บไซต์รองรับมือถือ (Responsive)

หากต้องการทำให้เว็บไซต์รองรับมือถือ ให้เพิ่มแท็ก meta viewport สร้างเลย์เอาต์แบบ mobile-first ด้วยความกว้างที่ยืดหยุ่น และใช้ breakpoint ของ CSS เพื่อจัดเลย์เอาต์ใหม่บนหน้าจอขนาดใหญ่ขึ้น เช่น เรียงคอลัมน์ซ้อนกัน ยุบเมนู และย่อรูปภาพให้พอดี จากนั้นตรวจทุกหน้าที่ความกว้างมือถือว่ามีการเลื่อนหน้าจอไปด้านข้างหรือไม่ ตัวอักษรเล็กเกินไปหรือไม่ และปุ่มเล็กเกินกว่าจะกดได้หรือไม่ สำหรับเว็บไซต์ที่สร้างด้วย AI พรอมต์ที่ชัดเจนหนึ่งข้อบวกการตรวจในพรีวิวขนาดมือถือมักแก้ได้เกือบทั้งหมด

การออกแบบแบบ responsive คืออะไรจริง ๆ

เว็บไซต์แบบ responsive ใช้ชุดหน้าและ URL ชุดเดียวที่ปรับตามหน้าจอ แทนที่จะมีเว็บไซต์ "m." แยกต่างหาก CSS จะเปลี่ยนเลย์เอาต์ที่ความกว้างบางค่า ซึ่งเรียกว่า breakpoint ส่วนประกอบหลักมีดังนี้:

• แท็ก meta viewport บอกเบราว์เซอร์มือถือให้ใช้ความกว้างจริงของอุปกรณ์
• เลย์เอาต์ที่ยืดหยุ่น ใช้เปอร์เซ็นต์ flexbox และ grid แทนความกว้างเป็นพิกเซลตายตัว
• Media query (หรือคลาสของเฟรมเวิร์กอย่าง md: ของ Tailwind) เปลี่ยนเลย์เอาต์เหนือความกว้างที่กำหนด
• สื่อที่ยืดหยุ่น รูปภาพและวิดีโอที่ย่อให้พอดีกับกรอบ

เรื่องนี้สำคัญเพราะผู้เข้าชมจำนวนมากของคุณน่าจะใช้โทรศัพท์ และเพราะ Google จัดทำดัชนีเวอร์ชันมือถือของหน้าของคุณ หากเนื้อหาหรือลิงก์มีอยู่เฉพาะบนเดสก์ท็อป Google ก็อาจมองไม่เห็นเช่นกัน

ตัวเลือกและการแลกเปลี่ยน

Mobile-first มักเรียบง่ายกว่า: คอลัมน์เดียวเป็นเลย์เอาต์ที่ง่ายที่สุด และการเพิ่มคอลัมน์เมื่อพื้นที่กว้างขึ้นทำได้ง่ายกว่าการลบคอลัมน์ออก

ส่วนที่มักพังบ่อยที่สุด

แท็ก viewport

หากหน้าดูเหมือนเว็บเดสก์ท็อปขนาดจิ๋วบนโทรศัพท์ แสดงว่าไม่มีแท็ก viewport:

<meta name="viewport" content="width=device-width, initial-scale=1">

อย่าเพิ่ม maximum-scale=1 หรือ user-scalable=no การปิดการซูมด้วยการบีบจะทำให้เว็บใช้ยากขึ้นสำหรับผู้ที่มีสายตาเลือนราง

ความกว้างตายตัวและการเลื่อนแนวนอน

บั๊ก responsive ที่พบบ่อยที่สุดคือสิ่งที่กว้างกว่าหน้าจอ เช่น กรอบ width: 1200px ที่ตายตัว ตารางกว้าง URL ยาวหรือบล็อกโค้ดยาว หรือรูปภาพที่ไม่มี max-width: 100% ทำให้ทั้งหน้าเลื่อนไปด้านข้าง ให้ใช้ max-width แทน width ปล่อยให้ข้อความขึ้นบรรทัดใหม่ได้ และให้สิ่งที่กว้างมีพื้นที่เลื่อนของตัวเอง

การนำทาง

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

ข้อความและพื้นที่กดได้

• ข้อความเนื้อหาประมาณ 16 px เป็นขั้นต่ำที่เหมาะสมบนโทรศัพท์ อินพุตที่มีตัวอักษรเล็กกว่าจะทำให้ iPhone ซูมเข้าเมื่อแตะ
• ทำให้ปุ่มและลิงก์กดง่าย WCAG 2.2 AA กำหนดขั้นต่ำ 24 คูณ 24 พิกเซล CSS (หรือมีระยะห่างเพียงพอ) ประมาณ 44 พิกเซลสบายกว่าสำหรับนิ้วโป้ง
• เว้นระยะระหว่างลิงก์ที่ติดกันเพื่อไม่ให้กดผิดตัว

ตารางและข้อมูล

ตารางกว้างเป็นส่วนที่ยากที่สุดของแอปแบบ responsive ตัวเลือก เรียงตามลำดับความชอบ: แสดงคอลัมน์น้อยลงบนโทรศัพท์ เปลี่ยนแต่ละแถวเป็นการ์ด หรือวางตารางในกรอบที่เลื่อนแนวนอนได้โดยตรึงคอลัมน์แรกไว้ เลือกตามสิ่งที่ผู้คนต้องใช้เปรียบเทียบ

รูปภาพและสื่อ

ใช้ max-width: 100% และ height: auto ส่งไฟล์ขนาดเล็กลงไปยังหน้าจอเล็กด้วย srcset และกำหนด width กับ height เพื่อป้องกันเลย์เอาต์กระโดด วิดีโอและแผนที่ที่ฝังไว้ต้องมีกรอบที่ยืดหยุ่นเพื่อคงอัตราส่วนภาพ รูปที่เล็กลงยังทำให้หน้าโหลดเร็วขึ้น ดู วิธีทำให้เว็บไซต์เร็วขึ้น

ฟอร์ม

วางป้ายกำกับไว้เหนือช่อง ทำให้ช่องกว้างเต็มความกว้าง และใช้ประเภทอินพุตที่ถูกต้อง (type="email" type="tel" inputmode="numeric") เพื่อให้โทรศัพท์แสดงคีย์บอร์ดที่ตรงกัน วางปุ่มส่งในตำแหน่งที่นิ้วโป้งเอื้อมถึง และให้มองเห็นได้เมื่อคีย์บอร์ดเปิดขึ้น

การโต้ตอบที่ใช้เฉพาะการชี้ (hover)

โทรศัพท์ไม่มีการ hover ทูลทิป เมนูดรอปดาวน์ และตัวอย่างที่แสดงเฉพาะเมื่อ hover จะมองไม่เห็นสำหรับผู้ใช้ที่สัมผัส ทำให้มันทำงานเมื่อแตะด้วย

พรอมต์ที่ได้ผล

สำหรับการสร้างใหม่ ให้บอกตั้งแต่ต้น:

สร้างแบบ mobile-first คอลัมน์เดียวบนโทรศัพท์ สองคอลัมน์ตั้งแต่ความกว้างแท็บเล็ต เลย์เอาต์เต็มบนเดสก์ท็อป ไม่มีการเลื่อนแนวนอนที่ความกว้าง 320 px ข้อความเนื้อหาอย่างน้อย 16 px พื้นที่กดอย่างน้อย 44 px มีปุ่มเมนูบนหน้าจอเล็ก และตารางที่เปลี่ยนเป็นการ์ดบนโทรศัพท์

สำหรับหน้าที่มีอยู่แล้ว ให้อธิบายสิ่งที่คุณเห็น:

บนโทรศัพท์ หน้า /pricing เลื่อนไปด้านข้างได้ และการ์ดแผนทั้งสามถูกบีบวางเคียงกัน ให้เรียงการ์ดในแนวตั้งต่ำกว่า 768 px ทำให้ตารางเปรียบเทียบเลื่อนแนวนอนในกรอบของตัวเองโดยตรึงคอลัมน์ฟีเจอร์ไว้ และคงเลย์เอาต์เดสก์ท็อปเหมือนเดิม

ตรวจทุกหน้าที่ความกว้าง 375 px แสดงรายการสิ่งที่ล้น ทับซ้อน มีตัวอักษรเล็กกว่า 16 px หรือพื้นที่กดเล็กกว่า 44 px หรือทำงานเฉพาะเมื่อ hover แล้วแก้ไขทีละรายการ

ทีละขั้นตอน

1. ยืนยันแท็ก viewport อยู่ในส่วนหัวของหน้า
2. ทดสอบที่ความกว้าง 320–375 px ในโหมดอุปกรณ์ของเบราว์เซอร์หรือพรีวิวขนาดโทรศัพท์ เลื่อนดูทุกหน้าจากบนลงล่าง
3. แก้การเลื่อนแนวนอนก่อน หาองค์ประกอบที่กว้างเกินไป สิ่งอื่นจะตัดสินยากจนกว่าจะแก้เรื่องนี้
4. จัดการการนำทาง ปุ่มเมนูและการกระทำสำคัญที่มองเห็นได้
5. ตรวจข้อความ พื้นที่กด และฟอร์ม ในแต่ละขั้นตอนหลัก เช่น สมัคร ค้นหา ชำระเงิน ติดต่อ
6. จัดการตารางและสื่อ การ์ดหรือกรอบเลื่อน รูปภาพและ embed ที่ตอบสนองต่อขนาด
7. ตรวจขนาดระหว่างกลาง ลากความกว้างช้า ๆ จากโทรศัพท์ไปเดสก์ท็อป เลย์เอาต์มักพังแถวความกว้างแท็บเล็ต
8. ทดสอบบนโทรศัพท์จริง อีมูเลเตอร์พลาดสิ่งต่าง ๆ เช่น คีย์บอร์ดบนหน้าจอที่บังปุ่ม รอยบาก และความเร็วของเว็บบนเครือข่ายมือถือ

ความผิดพลาดที่พบบ่อย

• ทดสอบที่ขนาดโทรศัพท์เดียว ตรวจโทรศัพท์เล็ก โทรศัพท์ใหญ่ และแท็บเล็ต
• ซ่อนเนื้อหาบนมือถือ เพื่อให้พอดี Google จัดทำดัชนีเวอร์ชันมือถือ และผู้ใช้โทรศัพท์ต้องการข้อมูลเดียวกัน
• ปิดการซูมในแท็ก viewport
• รูปขนาดเดสก์ท็อปบนโทรศัพท์ ทำให้โหลดช้าและกินข้อมูล
• องค์ประกอบ fixed ซ้อนกันเต็มไปหมด ส่วนหัวแบบติดหนึบ แบนเนอร์คุกกี้ และฟองแชทอาจบังครึ่งหนึ่งของหน้าจอโทรศัพท์
• ป๊อปอัปที่ปิดไม่ได้ บนหน้าจอเล็กเพราะปุ่มปิดอยู่นอกจอ

รายการตรวจสอบมือถือ

• มีแท็ก meta viewport และไม่ได้ปิดการซูม
• ไม่มีการเลื่อนแนวนอนที่ 320 px ในทุกหน้า
• ข้อความเนื้อหาประมาณ 16 px และอินพุตไม่ทำให้ซูม
• พื้นที่กดใหญ่และมีระยะห่างสบาย
• เมนูทำงานบนโทรศัพท์และด้วยคีย์บอร์ดได้
• ตารางอ่านได้บนโทรศัพท์ (การ์ด คอลัมน์น้อยลง หรือกรอบเลื่อน)
• รูปภาพและ embed ย่อขยายได้ และให้ไฟล์ที่มีขนาดเหมาะสม
• ฟอร์มใช้ประเภทอินพุตที่ถูกต้อง และปุ่มส่งเอื้อมถึงได้
• ไม่มีสิ่งสำคัญที่ต้องอาศัยการ hover
• ทดสอบบนโทรศัพท์จริงอย่างน้อยหนึ่งเครื่อง

เลย์เอาต์ที่ตอบสนองต่อขนาดยังเป็นส่วนหนึ่งของ การเข้าถึง: WCAG กำหนดให้เนื้อหาทำงานได้ที่ความกว้าง 320 px และซูม 200% หากคุณกำลังสร้างแอปที่ผู้คนใช้ทุกวันบนโทรศัพท์ วิธีสร้างเว็บแอปที่เป็นมิตรกับมือถือ อธิบายเพิ่มเติม รวมถึง PWA ที่ติดตั้งได้

การออกแบบ responsive บน Mythex

Mythex สร้างเว็บแอปแบบ responsive และในแพ็กเกจ Pro สามารถห่อเป็นแอป Android และ iPhone ได้ ในพื้นที่ทำงาน คลิกไอคอนโทรศัพท์เหนือ Preview (Switch to Mobile) เพื่อดูแอปของคุณในกรอบขนาดโทรศัพท์ และลากขอบกรอบเพื่อลองความกว้างอื่น (Preview and Code) เอกสารมีพรอมต์เริ่มต้นสั้น ๆ สำหรับแก้เลย์เอาต์หน้าจอเล็กใน พรอมต์สำหรับ responsive บนมือถือ ตรวจบนโทรศัพท์จริงด้วยเช่นกัน เปิด URL ที่เผยแพร่แล้ว หรือแชร์ลิงก์พรีวิวแล้วเปิดบนโทรศัพท์ของคุณ

คำถาม