คุณลักษณะโหมดอุปกรณ์ของ Chrome: จำลองอุปกรณ์เคลื่อนที่ได้อย่างรวดเร็ว

ลองใช้เครื่องมือของเราเพื่อกำจัดปัญหา

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

นี่อาจเป็นปัญหาใหญ่เนื่องจากคุณไม่สามารถทดสอบระบบปฏิบัติการเบราว์เซอร์และความละเอียดหน้าจอที่เป็นไปได้ทั้งหมดที่อุปกรณ์เหล่านี้ใช้อย่างน้อยก็ไม่ใช่โดยไม่มีการจำลองหรือซอฟต์แวร์ช่วยเหลือ

สิ่งหนึ่งที่คุณต้องการให้แน่ใจคือเว็บไซต์แสดงผลได้ดีโดยไม่คำนึงถึงขนาดหน้าจอ ควรแสดงผลได้ดีสำหรับผู้เยี่ยมชมที่ท่องเว็บด้วย Iphone 5 ของ Apple ด้วยอุปกรณ์ Google Nexus, Windows Phone หรือ Amazon Kindle

โหมดอุปกรณ์ของ Google Chrome ซึ่งมีอยู่ใน Chromium เช่นกันมอบเครื่องมือในการจำลองอุปกรณ์เคลื่อนที่ในเบราว์เซอร์ได้อย่างรวดเร็ว

แอปพลิเคชั่นหนึ่งคือตรวจสอบให้แน่ใจว่าหน้าจอแสดงผลบนอุปกรณ์ได้ดีอีกแอปพลิเคชันหนึ่งเพื่อดูว่าเนื้อหาถูกส่งไปยังอุปกรณ์ได้ดีเพียงใด

บันทึก : Chrome เวอร์ชันที่วางจำหน่ายอาจไม่มีโหมดอุปกรณ์และคุณลักษณะการจำลองบางอย่าง อย่างไรก็ตามคุณสมบัติเหล่านี้จะพร้อมใช้งานในที่สุด

เริ่มโหมดอุปกรณ์

ในการเริ่มโหมดอุปกรณ์ให้เปิดเครื่องมือสำหรับนักพัฒนาก่อน คุณสามารถทำได้โดยใช้ทางลัด Ctrl-Shift-i หรือโดยคลิกที่ไอคอนแฮมเบอร์เกอร์แล้วเลือกเครื่องมือเพิ่มเติม> เครื่องมือสำหรับนักพัฒนาจากเมนูบริบท

ที่นี่คุณต้องเลือกปุ่มโหมดอุปกรณ์ที่คุณพบอยู่ที่มุมบนซ้ายถัดจากไอคอนตัวตรวจสอบ

เมื่อเสร็จแล้วเมนูใหม่จะแสดงขึ้นที่ด้านบนและคุณจะสังเกตเห็นว่าไม้บรรทัดแสดงในแนวตั้งและแนวนอนเช่นกัน

chrome device mode

คุณสามารถใช้เมนูอุปกรณ์ที่ด้านบนเพื่อเลือกอุปกรณ์เฉพาะที่คุณสนใจ Chrome จะแก้ไขหน้าให้พอดีกับความละเอียดโดยอัตโนมัติ (ซึ่งคุณสามารถปิดการใช้งานได้หากต้องการ)

นอกเหนือจากตัวเลือกในการสลับไปมาระหว่างอุปกรณ์ต่างๆอย่างรวดเร็วแล้วอุปกรณ์ที่รองรับยังมีอุปกรณ์ไม่กี่โหลโดยเฉพาะและแบบทั่วไปนอกจากนี้ยังสามารถเปิดใช้งานการควบคุมปริมาณเครือข่ายเพื่อเลียนแบบการเชื่อมต่อที่ช้าและแก้ไข User Agent ซึ่งจะเปลี่ยนโดยอัตโนมัติเมื่อคุณเปลี่ยนอุปกรณ์

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

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

คุณสามารถดูข้อมูลเพิ่มเติมเกี่ยวกับคุณสมบัติอื่น ๆ ของโหมดอุปกรณ์ บนเว็บไซต์นักพัฒนา Chrome อย่างเป็นทางการ .

ข้อสรุป

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