จำลองอุปกรณ์เคลื่อนที่ด้วยโหมดอุปกรณ์

Sofia Emelianova
Sofia Emelianova

ใช้โหมดอุปกรณ์เพื่อประมาณการลักษณะและประสิทธิภาพของหน้าเว็บในอุปกรณ์เคลื่อนที่

ภาพรวม

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

ข้อจำกัด

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

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

เปิดแถบเครื่องมืออุปกรณ์

หากต้องการเปิดแถบเครื่องมืออุปกรณ์ ให้ทำตามขั้นตอนต่อไปนี้

  1. เปิดเครื่องมือสำหรับนักพัฒนาเว็บ
  2. คลิกอุปกรณ์ สลับแถบเครื่องมืออุปกรณ์ที่อยู่ในแถบการทำงานด้านบน

ปุ่มเปิด/ปิดแถบเครื่องมือของอุปกรณ์

จำลองวิวพอร์ตบนอุปกรณ์เคลื่อนที่

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

แถบเครื่องมืออุปกรณ์

โหมดวิวพอร์ตที่ปรับเปลี่ยนตามอุปกรณ์

ลากแฮนเดิลเพื่อปรับขนาดวิวพอร์ตเป็นขนาดที่ต้องการ หรือป้อนค่าที่ต้องการ ในช่องความกว้างและความสูง ในตัวอย่างนี้ ตั้งค่าความกว้างเป็น 480 และตั้งค่าความสูงเป็น 415

แฮนเดิลสำหรับการเปลี่ยนขนาดของวิวพอร์ตเมื่ออยู่ในโหมดวิวพอร์ตที่ปรับเปลี่ยนตามอุปกรณ์

หรือใช้แถบค่าความกว้างที่กำหนดล่วงหน้าเพื่อกำหนดความกว้างด้วยการคลิกให้สิ่งใดสิ่งหนึ่งต่อไปนี้

แถบค่าที่กำหนดล่วงหน้าของความกว้าง

อุปกรณ์เคลื่อนที่ขนาดเล็ก อุปกรณ์เคลื่อนที่ M มือถือ L แท็บเล็ต แล็ปท็อป แล็ปท็อปขนาด L 4K
320 พิกเซล 375 พิกเซล 425 พิกเซล 768 พิกเซล 1024 พิกเซล 1440 พิกเซล 2560 พิกเซล

แสดงคิวรี่สื่อ

หากต้องการแสดงเบรกพอยท์คำค้นหาสื่อเหนือวิวพอร์ต ให้คลิก ตัวเลือกเพิ่มเติม ตัวเลือกเพิ่มเติม > แสดงคิวรี่สื่อ

แสดงคิวรี่สื่อ

ตอนนี้เครื่องมือสำหรับนักพัฒนาเว็บจะแสดงแถบเพิ่มเติม 2 แถบเหนือวิวพอร์ต ดังนี้

  • แถบสีน้ำเงินที่มีเบรกพอยท์ max-width จุด
  • แถบสีส้มที่มีเบรกพอยท์ min-width จุด

คลิกระหว่างเบรกพอยท์เพื่อเปลี่ยนความกว้างของวิวพอร์ตเพื่อให้เบรกพอยท์เริ่มทำงาน

คลิกระหว่างเบรกพอยท์เพื่อเปลี่ยนความกว้างของวิวพอร์ต

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

แสดงในเมนูแบบเลื่อนลงของซอร์สโค้ด

ตั้งค่าอัตราส่วนพิกเซลของอุปกรณ์

อัตราส่วนพิกเซลของอุปกรณ์ (DPR) คืออัตราส่วนระหว่างพิกเซลจริงบนหน้าจอฮาร์ดแวร์และพิกเซลเชิงตรรกะ (CSS) กล่าวคือ DPR จะบอกให้ Chrome ทราบจำนวนพิกเซลหน้าจอที่จะใช้ในการวาดพิกเซล CSS Chrome ใช้ค่า DPR เมื่อวาดบนจอแสดงผล HiDPI (จุดสูงต่อนิ้ว)

วิธีกำหนดค่า DPR

  1. คลิกตัวเลือกเพิ่มเติม ตัวเลือกเพิ่มเติม > เพิ่มอัตราส่วนพิกเซลของอุปกรณ์

    เพิ่มอัตราส่วนพิกเซลของอุปกรณ์

  2. ในแถบการทำงานที่ด้านบนของวิวพอร์ต ให้เลือกค่า DPR จากเมนูแบบเลื่อนลง DPR ใหม่

    การตั้งค่า DPR

ตั้งค่าประเภทอุปกรณ์

ใช้รายการประเภทอุปกรณ์เพื่อจำลองอุปกรณ์เคลื่อนที่หรืออุปกรณ์เดสก์ท็อป

รายการประเภทอุปกรณ์

หากไม่เห็นรายการในแถบการทำงานที่ด้านบน ให้เลือกตัวเลือกเพิ่มเติม ตัวเลือกเพิ่มเติม > เพิ่มประเภทอุปกรณ์

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

ตัวเลือกวิธีการแสดงผลไอคอนเคอร์เซอร์เหตุการณ์ที่เริ่มทำงาน
อุปกรณ์เคลื่อนที่อุปกรณ์เคลื่อนที่วงกลมการสัมผัส
อุปกรณ์เคลื่อนที่ (ไม่มีการสัมผัส)อุปกรณ์เคลื่อนที่ปกติclick
เดสก์ท็อปเดสก์ท็อปปกติclick
เดสก์ท็อป (หน้าจอสัมผัส)เดสก์ท็อปวงกลมการสัมผัส

โหมดเฉพาะอุปกรณ์

หากต้องการจำลองมิติข้อมูลของอุปกรณ์เคลื่อนที่เครื่องใดเครื่องหนึ่ง ให้เลือกอุปกรณ์จากรายการมิติข้อมูล

รายการมิติข้อมูล

โปรดดูข้อมูลเพิ่มเติมที่เพิ่มอุปกรณ์เคลื่อนที่ที่กำหนดเอง

หมุนวิวพอร์ตให้อยู่ในแนวนอน

คลิก screen_rotation หมุน เพื่อหมุนวิวพอร์ตให้เป็นแนวนอน

การวางแนวนอน

โปรดทราบว่าปุ่มหมุน หมุน จะหายไปหากแถบเครื่องมืออุปกรณ์แคบ

แถบเครื่องมืออุปกรณ์

โปรดดูเพิ่มเติมที่ตั้งค่าการวางแนว

สลับโหมดหน้าจอคู่

อุปกรณ์บางรุ่น เช่น Surface Duo จะมีหน้าจอ 2 หน้าจอและใช้งานได้ 2 วิธี นั่นคือขณะที่ใช้งาน 1 หน้าจอหรือทั้ง 2 หน้าจอ

หากต้องการสลับระหว่างหน้าจอคู่และหน้าจอเดียว ให้คลิกdevices_fold สลับโหมดหน้าจอคู่ในแถบเครื่องมือ

โหมดหน้าจอคู่เปิดอยู่

ตั้งค่าลักษณะการทำงานของอุปกรณ์

อุปกรณ์บางรุ่น เช่น Asus Zenbook Fold มีหน้าจอแบบพับได้ หน้าจอลักษณะนี้เป็นแบบต่อเนื่องหรือพับอยู่ ท่าต่อเนื่องหมายถึง "แนวราบ" ตำแหน่งและการพับเป็นมุมระหว่างส่วนต่างๆ ของจอแสดงผล

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

ตั้งค่าท่าพับเป็นพับ

แสดงเฟรมของอุปกรณ์

เมื่อจำลองขนาดของอุปกรณ์เคลื่อนที่ที่ต้องการ เช่น Nest Hub ให้เลือกตัวเลือกเพิ่มเติม ตัวเลือกเพิ่มเติม > แสดงเฟรมอุปกรณ์เพื่อแสดงเฟรมอุปกรณ์จริงรอบวิวพอร์ต

แสดงเฟรมของอุปกรณ์

ในตัวอย่างนี้ เครื่องมือสำหรับนักพัฒนาเว็บจะแสดงเฟรมของ Nest Hub

เฟรมอุปกรณ์สำหรับ Nest Hub

เพิ่มอุปกรณ์เคลื่อนที่ที่กำหนดเอง

วิธีเพิ่มอุปกรณ์ที่กำหนดเอง

  1. คลิกรายการอุปกรณ์ แล้วเลือกแก้ไข

    แก้ไข

  2. ในการตั้งค่า การตั้งค่า > อุปกรณ์ ให้เลือกอุปกรณ์จากรายการอุปกรณ์ที่รองรับ หรือคลิกเพิ่มอุปกรณ์ที่กำหนดเองเพื่อเพิ่มอุปกรณ์ของคุณเอง

  3. หากคุณกำลังเพิ่มของคุณเอง ให้ป้อนชื่อ ความกว้าง และความสูงสำหรับอุปกรณ์ แล้วคลิกเพิ่ม

    กำลังสร้างอุปกรณ์ที่กำหนดเอง

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

  4. กลับไปที่วิวพอร์ต ให้เลือกอุปกรณ์ที่เพิ่มเข้ามาใหม่จากรายการมิติข้อมูล

แสดงไม้บรรทัด

คลิกตัวเลือกเพิ่มเติม ตัวเลือกเพิ่มเติม > แสดงไม้บรรทัดเพื่อดูไม้บรรทัด หน่วยการปรับขนาดของไม้บรรทัดคือพิกเซล

แสดงไม้บรรทัด

เครื่องมือสำหรับนักพัฒนาเว็บจะแสดงไม้บรรทัดที่ด้านบนและด้านซ้ายของวิวพอร์ต

ไม้บรรทัดด้านบนและด้านซ้ายของวิวพอร์ต

คลิกไม้บรรทัดตรงจุดที่ต้องการเพื่อตั้งค่าความกว้างและความสูงของวิวพอร์ต

ซูมวิวพอร์ต

ใช้รายการซูมเพื่อซูมเข้าหรือออก

ซูม

จับภาพหน้าจอ

หากต้องการจับภาพหน้าจอของสิ่งที่คุณเห็นในวิวพอร์ต ให้คลิก ตัวเลือกเพิ่มเติม ตัวเลือกเพิ่มเติม > จับภาพหน้าจอ

ตัวเลือก "จับภาพหน้าจอ" ในเมนู "ตัวเลือกเพิ่มเติม"

หากต้องการจับภาพหน้าจอของทั้งหน้าซึ่งรวมถึงเนื้อหาที่ไม่ได้แสดงในวิวพอร์ต ให้เลือกจับภาพหน้าจอขนาดเต็มจากเมนูเดียวกัน

หากต้องการใส่เฟรมอุปกรณ์เมื่อจับภาพหน้าจอในโหมดเฉพาะอุปกรณ์ ให้แสดงเฟรมอุปกรณ์ก่อน แล้วคลิกจับภาพหน้าจอตามคำแนะนำก่อนหน้านี้

ถ่ายภาพหน้าจอที่มีเฟรมอุปกรณ์

หากต้องการดูวิธีอื่นๆ ในการถ่ายภาพหน้าจอด้วยเครื่องมือสำหรับนักพัฒนาเว็บ โปรดดู 4 วิธีในการจับภาพหน้าจอด้วยเครื่องมือสำหรับนักพัฒนาเว็บ

ควบคุมเครือข่ายและ CPU

หากต้องการควบคุมทั้งเครือข่ายและ CPU ให้เลือกอุปกรณ์เคลื่อนที่ระดับกลางหรืออุปกรณ์เคลื่อนที่โลว์เอนด์จาก รายการ Throttle

รายการ Throttle

อุปกรณ์เคลื่อนที่ระดับกลางจะจำลอง 3G ที่เร็วและควบคุม CPU ของคุณจึงช้ากว่า 4 เท่า ปกติ อุปกรณ์เคลื่อนที่ระดับล่างจะจำลอง 3G ที่ช้าและควบคุม CPU ของคุณช้ากว่าปกติ 6 เท่า เก็บ แต่การควบคุมจะสัมพันธ์กับความสามารถปกติของแล็ปท็อปหรือเดสก์ท็อป

โปรดทราบว่ารายการควบคุมจะซ่อนอยู่หากแถบเครื่องมืออุปกรณ์แคบ

ควบคุมเฉพาะ CPU เท่านั้น

หากต้องการควบคุมเฉพาะ CPU เท่านั้นโดยไม่รวมเครือข่าย ให้ไปที่แผงประสิทธิภาพ แล้วคลิกบันทึก การตั้งค่า การตั้งค่าการจับภาพ และ แล้วเลือกช้าลง 4 เท่า ช้าลง 6 เท่า หรือช้าลง 20 เท่าจากรายการ CPU

รายการ CPU

ควบคุมเฉพาะเครือข่าย

หากต้องการควบคุมเฉพาะเครือข่ายเท่านั้นโดยไม่ควบคุม CPU ให้ไปที่แผงเครือข่าย แล้วเลือก 3G ที่รวดเร็ว หรือ 3G ที่ช้าจากรายการ Throttle

รายการ Throttle

หรือกด Command+Shift+P (Mac) หรือ Control+Shift+P (Windows, Linux, ChromeOS) เพื่อเปิดคำสั่ง ในเมนู ให้พิมพ์ 3G แล้วเลือกเปิดใช้การควบคุม 3G แบบเร็วหรือเปิดใช้การควบคุม 3G แบบช้า

เมนูคำสั่ง

คุณยังตั้งค่าการควบคุมเครือข่ายจากแผงประสิทธิภาพได้ด้วย คลิกการตั้งค่าการจับภาพ การตั้งค่าการจับภาพ แล้วเลือก 3G ที่เร็วหรือ 3G ช้าจากรายการเครือข่าย

กำลังตั้งค่าการควบคุมเครือข่ายจากแผงประสิทธิภาพ

จำลองเซ็นเซอร์

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

ส่วนถัดไปจะแสดงให้เห็นคร่าวๆ เกี่ยวกับวิธีลบล้างตำแหน่งทางภูมิศาสตร์และตั้งค่าการวางแนวของอุปกรณ์ ดูรายการฟีเจอร์ทั้งหมดได้ที่จําลองเซ็นเซอร์ของอุปกรณ์

ลบล้างตำแหน่งทางภูมิศาสตร์

หากต้องการเปิด UI การลบล้างตำแหน่งทางภูมิศาสตร์ ให้คลิกปรับแต่งและควบคุมเครื่องมือสำหรับนักพัฒนาเว็บ ปรับแต่งและควบคุมเครื่องมือสำหรับนักพัฒนาเว็บ จากนั้นเลือกเครื่องมือเพิ่มเติม > เซ็นเซอร์

เซ็นเซอร์

หรือกด Command+Shift+P (Mac) หรือ Control+Shift+P (Windows, Linux, ChromeOS) เพื่อเปิดคำสั่ง เมนู ให้พิมพ์ Sensors แล้วเลือกแสดงเซ็นเซอร์

แสดงเซ็นเซอร์

เลือกค่าที่กำหนดล่วงหน้า 1 ค่าจากรายการตำแหน่ง หรือเลือกอื่นๆ... เพื่อป้อน พิกัดของตนเอง หรือเลือกไม่มีข้อมูลตำแหน่งเพื่อทดสอบลักษณะการทำงานของหน้าเว็บเมื่อ ตำแหน่งทางภูมิศาสตร์อยู่ในสถานะข้อผิดพลาด

ตำแหน่งทางภูมิศาสตร์

ตั้งค่าการวางแนว

หากต้องการเปิด UI การวางแนว ให้คลิกปรับแต่งและควบคุมเครื่องมือสำหรับนักพัฒนาเว็บ ปรับแต่งและควบคุมเครื่องมือสำหรับนักพัฒนาเว็บ จากนั้นเลือกเครื่องมือเพิ่มเติม > เซ็นเซอร์

เซ็นเซอร์

หรือกด Command+Shift+P (Mac) หรือ Control+Shift+P (Windows, Linux, ChromeOS) เพื่อเปิดคำสั่ง เมนู ให้พิมพ์ Sensors แล้วเลือกแสดงเซ็นเซอร์

แสดงเซ็นเซอร์

เลือกค่าที่กำหนดล่วงหน้า 1 ค่าจากรายการการวางแนว หรือเลือกการวางแนวที่กำหนดเองเพื่อตั้งค่า มีค่าอัลฟ่า เบต้า และแกมมาเอง

การวางแนว