เกี่ยวกับการสอน

วิธีเลียนแบบอุปกรณ์เคลื่อนที่ในเบราว์เซอร์บนเดสก์ท็อป (Chrome, Firefox, Opera, Edge และ Internet Explorer)

มีเว็บไซต์ที่มีตัวเลือกและคุณลักษณะเพิ่มเติมเมื่อเข้าชมบนอุปกรณ์เคลื่อนที่ เมื่อเกิดเหตุการณ์เช่นนี้ขึ้นและคุณใช้เบราว์เซอร์บนเดสก์ท็อปคุณจะผิดหวังเนื่องจากประสบการณ์การใช้งานที่ จำกัด ที่คุณได้รับ ในบางครั้งคุณอาจต้องการทดสอบและดูว่าเว็บไซต์มีลักษณะเป็นอย่างไรในโทรศัพท์มือถือเฉพาะเช่น iPhone, iPad หรือสมาร์ทโฟน Pixel 2 นี่คือวิธีดู (และทดสอบ) ไซต์บนมือถือบนเดสก์ท็อปพีซี:

หมายเหตุ: คู่มือนี้ครอบคลุมถึง Google Chrome, Mozilla Firefox, Opera, Microsoft Edge และ Internet Explorer ใน Windows ไปที่ส่วนสำหรับเบราว์เซอร์ที่คุณสนใจเพื่อค้นหาขั้นตอนที่คุณต้องทำ

วิธีเปิดใช้งานโปรแกรมจำลองเบราว์เซอร์มือถือใน Google Chrome

ใน Google Chrome ให้โหลดเว็บไซต์บนมือถือที่คุณต้องการดู จากนั้นคลิกหรือแตะจุดแนวตั้งสามจุดที่มุมบนขวา ปุ่มเหล่านี้เป็นปุ่ม "กำหนดค่าและควบคุม Google Chrome" ในเมนูที่เปิดขึ้นให้เลือก เครื่องมือเพิ่มเติม จากนั้นคลิก "เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์" เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์เปิดอยู่ เพื่อให้บรรลุผลเช่นเดียวกันคุณยังสามารถกดปุ่ม CTRL + Shift + I บนแป้นพิมพ์

คลิกหรือแตะปุ่ม "สลับแถบเครื่องมือของอุปกรณ์" (เป็นปุ่มเล็ก ๆ ที่ดูเหมือนสมาร์ทโฟนและแท็บเล็ตใกล้ ๆ กัน) หรือกด CTRL + Shift + M บนแป้นพิมพ์ การดำเนินการนี้จะเปิดใช้งานแถบเครื่องมืออุปกรณ์ที่โหลดหน้ามือถือ แถบเครื่องมืออุปกรณ์ใช้เทมเพลต Responsive สำหรับหน้าเว็บที่คุณโหลด คลิกที่อุปกรณ์และเลือกอุปกรณ์เคลื่อนที่ที่ต้องการเลียนแบบ: Samsung Galaxy S5, พิกเซล 2, พิกเซล 2 XL, iPhone (จากรุ่น 5 ถึง iPhone X), iPad และ iPad Pro โหลดหน้ามือถือใหม่เหมือนกับว่าคุณใช้สมาร์ทโฟนหรือแท็บเล็ตที่คุณเลือกจากรายการ ไม่ทราบว่าคุณกำลังใช้คอมพิวเตอร์เดสก์ท็อปอยู่

เมื่อดำเนินการเสร็จแล้วให้กดปุ่ม X (ปิด) ที่ มุมขวาบนของเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ Google Chrome เพื่อกลับสู่โหมดเรียกดูเดสก์ท็อปมาตรฐาน

วิธีเปิดใช้งานโปรแกรมจำลองเบราว์เซอร์มือถือใน Mozilla Firefox

ใน Mozilla Firefox เปิดหน้าเว็บสำหรับมือถือที่คุณต้องการเข้าถึงเช่นถ้าคุณใช้อุปกรณ์เคลื่อนที่ จากนั้นคลิกหรือแตะปุ่มชาวเมืองที่มุมบนขวา มีชื่อว่า "Open menu"

ในเมนูที่เปิดขึ้นให้เลือก Web Developer

คุณเห็นตัวเลือกมากมายที่เป็นประโยชน์สำหรับนักพัฒนาซอฟต์แวร์ สิ่งที่คุณสนใจคือ "โหมดการออกแบบที่ตอบสนองต่อการตอบสนอง" คลิกหรือแตะที่ตัวเลือกนี้ โหมดเฉพาะของการดูหน้าเว็บนี้จะถูกโหลดใน Firefox แล้ว คุณสามารถทำได้โดยกด CTRL + Shift + M บนแป้นพิมพ์

เปิดใช้งาน โหมดออกแบบที่ตอบสนองต่อ ในกึ่งกลางของหน้าจอคุณจะเห็นพารามิเตอร์ที่ใช้โดยโหมดนี้ หากไม่ได้เลือกอุปกรณ์ให้คลิกหรือแตะที่รายการแบบหล่นลงพร้อมกับอุปกรณ์ที่ใช้ในการจำลองและเลือกอุปกรณ์ที่คุณต้องการจำลอง: Samsung Galaxy S9, iPad, iPhone (จากรุ่น 6 ถึง iPhone X), Kindle Fire HDX, และอื่น ๆ โหลดหน้ามือถือใหม่เช่นเดียวกับที่โหลดบนอุปกรณ์เคลื่อนที่ที่คุณเลือกสำหรับการจำลอง

เมื่อดำเนินการเสร็จแล้วให้กดปุ่ม X (โหมดตอบสนองการออกแบบที่ปิด) เพื่อกลับสู่โหมดการเรียกดูเดสก์ท็อปมาตรฐาน

วิธีเปิดใช้งานโปรแกรมจำลองเบราว์เซอร์มือถือใน Opera

ใน Opera โหลดหน้ามือถือที่คุณต้องการดูเช่นเดียวกับที่คุณใช้โทรศัพท์มือถือ จากนั้นคลิกไอคอน Opera ที่ด้านซ้ายบน นี่คือปุ่ม "ปรับแต่งและควบคุม Opera" ในเมนูที่เปิดขึ้นให้เลือก นักพัฒนาซอฟต์แวร์ ตามด้วย เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ จะแสดงที่ด้านขวาของหน้าต่างเบราเซอร์ คุณสามารถทำได้โดยกดปุ่ม CTRL + Shift + I บนแป้นพิมพ์ของคุณ

จากนั้นคลิกหรือแตะปุ่ม "สลับแถบเครื่องมือของอุปกรณ์" (เป็นปุ่มเล็ก ๆ ที่ดูเหมือนสมาร์ทโฟนและแท็บเล็ตใกล้ ๆ กัน) หรือกด CTRL + Shift + M บนแป้นพิมพ์ ซึ่งจะเปิดใช้งานแถบเครื่องมืออุปกรณ์ซึ่งจะโหลดหน้าเว็บของคุณ คลิกที่อุปกรณ์และเลือกอุปกรณ์เคลื่อนที่ที่ต้องการเลียนแบบ: Samsung Galaxy S5, พิกเซล 2, พิกเซล 2 XL, iPhone (จากรุ่น 5 ถึง iPhone X), iPad และ iPad Pro หน้าเว็บสำหรับมือถือถูกโหลดใหม่ภายใน Opera โดยใช้ลักษณะของสมาร์ทโฟนหรือแท็บเล็ตที่คุณเลือกจากรายการ

เมื่อดำเนินการเสร็จแล้วให้กดปุ่ม X (ปิด) ที่ มุมขวาบนของเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ของ Opera เพื่อเรียกดูเดสก์ท็อป

วิธีเปิดใช้งานโปรแกรมจำลองเบราว์เซอร์มือถือใน Microsoft Edge

ใน Microsoft Edge ให้โหลดไซต์ที่คุณต้องการดูเหมือนกับว่าคุณกำลังใช้อุปกรณ์เคลื่อนที่ จากนั้นคลิกหรือแตะปุ่ม "การตั้งค่าและอื่น ๆ " ที่มุมขวาบนของหน้าต่างเบราเซอร์ ไอคอนมีลักษณะเป็นจุดสามจุด ถ้าคุณกำลังใช้ Windows Update 10 ตุลาคม 2561 ให้ไปที่ "เครื่องมือเพิ่มเติม" จากนั้นไปที่ "เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์" ถ้าคุณกำลังใช้ Windows 10 เมษายน 2561 ขึ้นไปให้เลือก เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ F12 เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ จะเปิดขึ้นที่ด้านล่างของหน้าต่างเบราเซอร์ คุณสามารถบรรลุผลลัพธ์เช่นเดียวกันโดยกด F12 บนแป้นพิมพ์ไม่ว่าเก่าหรือใหม่ของ Windows 10 จะเป็นอย่างไร

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

จากนั้นคลิกหรือแตะรายการ อุปกรณ์ แบบเลื่อนลง คุณสามารถเลือกเลียนแบบอุปกรณ์ต่อไปนี้: Lumia 650, Lumia 950, Lumia 950 XL, Surface Book, Surface Pro 4, iPad, มินิ iPad, Nexus 5, Nexus 5X และ Nexus 6P

เมื่อดำเนินการเสร็จแล้วให้กดปุ่ม X (ปิด) ที่ มุมขวาบนของเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ของ Microsoft Edge เพื่อกลับไปที่การเรียกเดสก์ท็อป

วิธีเปิดใช้งานโปรแกรมจำลองเบราว์เซอร์มือถือใน Internet Explorer

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

คลิกหรือแตะแท็บ Emulation จากนั้นคลิกที่ Browser (เบราเซอร์) แบบเลื่อนลง คุณต้องเลือก Windows Phone เป็นอุปกรณ์เคลื่อนที่ของคุณและโหลดหน้าเว็บใหม่เหมือนกับว่าคุณใช้สมาร์ทโฟนกับ Windows Phone ขออภัย Internet Explorer ไม่เสนอตัวเลือกในการเลียนแบบสมาร์ทโฟน Android หรือ iPhones และ iPads

เมื่อดำเนินการเสร็จแล้วให้กดปุ่ม X (ปิด) ที่ มุมขวาบนของเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์เพื่อเรียกดูเดสก์ท็อป

ในเว็บไซต์ใดที่คุณต้องเลียนแบบอุปกรณ์เคลื่อนที่

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