เว็บ Joomla แสดงผลไม่เหมือนกันบนมือถือกับคอมพิวเตอร์ แก้อย่างไร?

เว็บ Joomla ที่ดูต่างกันบนมือถือกับคอมพิวเตอร์อาจเกิดจากการออกแบบแบบ Responsive ซึ่งปรับเลย์เอาต์ตามขนาดหน้าจอ แต่ถ้าเนื้อหาหาย เมนูใช้งานไม่ได้ หรือองค์ประกอบทับกัน ให้ตรวจเทมเพลต สไตล์ที่ผูกกับเมนู โมดูล และ CSS ที่ปรับแต่งไว้

❶ แยกให้ออกว่าเป็นการแสดงผลปกติหรือปัญหา

① เมนูที่ยุบเป็นปุ่มสามขีดบนมือถือมักเป็นพฤติกรรมปกติของเทมเพลต Responsive ให้แตะปุ่มเมนูเพื่อเปิดรายการนำทาง

② เปรียบเทียบหน้าเดียวกันและ URL เดียวกันบนทั้งสองอุปกรณ์ เพื่อไม่ให้สับสนกับหน้าเมนูหรือบทความคนละรายการ

③ ตรวจว่าเนื้อหาหายจริงหรือเพียงย้ายตำแหน่งลงด้านล่าง เช่น โมดูลด้านข้างบนคอมพิวเตอร์อาจเรียงต่อท้ายเนื้อหาบนมือถือ

④ หากเห็นพื้นที่ว่างผิดปกติ ข้อความล้นจอ หรือปุ่มกดไม่ได้ ให้ตรวจความกว้างขององค์ประกอบและการตั้งค่าแสดงผลของเทมเพลต

❷ ตรวจสไตล์เทมเพลตที่กำหนดให้แต่ละหน้า

Joomla สามารถกำหนดสไตล์เทมเพลตต่างกันให้กับรายการเมนูบางหน้าได้ จึงควรตรวจว่าสไตล์ที่หน้าใช้อยู่เป็นตัวเดียวกันหรือไม่

① ในหน้าแอดมิน เปิด System → Site Templates → Styles หรือส่วนจัดการสไตล์เทมเพลตของเว็บไซต์

② ตรวจว่าสไตล์ใดเป็นค่าเริ่มต้น และมีสไตล์อื่นกำหนดไว้สำหรับรายการเมนูเฉพาะหรือไม่

③ เปิดรายการเมนูของหน้าที่มีปัญหา แล้วดูช่องเลือกสไตล์เทมเพลต หากต้องการให้ใช้รูปแบบเดียวกับหน้าอื่น ให้เลือกสไตล์ที่ถูกต้อง

④ บันทึกแล้วทดสอบหน้าเดิมทั้งบนมือถือและคอมพิวเตอร์

❸ ตรวจตำแหน่งและการกำหนดหน้าให้โมดูล

① เปิดแก้ไขโมดูลที่ดูผิดตำแหน่งหรือไม่แสดง แล้วตรวจค่า Position ว่าตรงกับเทมเพลตที่หน้านั้นใช้หรือไม่

② ตรวจ Menu Assignment ว่าโมดูลถูกกำหนดให้แสดงในหน้าที่มีปัญหา

③ ตรวจ Access และสถานะโมดูลว่าเผยแพร่และผู้เข้าชมมีสิทธิ์ดู

④ ทดสอบโมดูลบนหน้าจอแคบ หากเทมเพลตซ่อนบางตำแหน่งบนมือถือ ให้ตรวจการตั้งค่าของเทมเพลตหรือส่วนเสริมที่ใช้ควบคุมการแสดงผล

❹ ตรวจ CSS รูปภาพ และส่วนเสริมที่ปรับหน้าตา

① หากเพิ่งเพิ่ม CSS แบบกำหนดเอง ให้ตรวจคำสั่งที่เกี่ยวกับความกว้าง การซ่อนองค์ประกอบ และจุดเปลี่ยนเลย์เอาต์ (breakpoint)

② ตรวจรูปภาพและตารางที่กว้างเกินหน้าจอ องค์ประกอบเหล่านี้อาจทำให้หน้าเลื่อนในแนวนอนหรือทำให้เนื้อหาส่วนอื่นเบียดกัน

③ ปิดส่วนเสริมที่เพิ่งติดตั้งหรือแก้ไขชั่วคราวทีละรายการ เพื่อดูว่ามีส่วนใดเปลี่ยนการแสดงผลบนมือถือ

④ หากสงสัยว่าเทมเพลตมีปัญหา ให้ทดสอบหน้าดังกล่าวด้วยสไตล์เทมเพลตมาตรฐานก่อน แล้วค่อยกลับไปแก้เทมเพลตเดิม

❺ ทดสอบและยืนยันหลังแก้ไข

① ล้างแคช Joomla แคชของเบราว์เซอร์ และแคชจากบริการภายนอกที่เว็บไซต์ใช้อยู่

② ทดสอบหน้าเดียวกันในหน้าต่างส่วนตัว และหมุนอุปกรณ์มือถือเป็นแนวตั้งกับแนวนอน

③ ตรวจเมนู รูปภาพ ปุ่ม และแบบฟอร์มว่ายังใช้งานได้ทั้งสองขนาดหน้าจอ

④ บันทึกชื่อหน้า สไตล์เทมเพลต และการเปลี่ยนแปลงที่ทำไว้ หากต้องย้อนกลับจะได้ระบุจุดที่แก้ได้ง่าย

ComSiam แนะนำให้ตรวจสไตล์เทมเพลตที่ผูกกับเมนูก่อน เพราะหน้าแต่ละหน้าสามารถใช้รูปแบบต่างกันได้ จากนั้นจึงไล่ตรวจโมดูล CSS และส่วนเสริมที่เพิ่งเปลี่ยน

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