วิธีใช้ตัวจำลองเบราว์เซอร์มือถือใน Chrome, Firefox, Edge และ Opera

คุณจำเป็นต้องเข้าถึงโปรแกรมจำลองเบราว์เซอร์ของสมาร์ทโฟนบนพีซีของคุณเพื่อทดสอบเวอร์ชันมือถือของเว็บไซต์ที่คุณสนใจหรือไม่? บางทีคุณอาจเป็นนักพัฒนาเว็บหรือต้องการเป็นนักพัฒนาเว็บ และคุณจำเป็นต้องจำลองเบราว์เซอร์บนอุปกรณ์เคลื่อนที่สำหรับโครงการที่คุณกำลังดำเนินการอยู่ โดยไม่คำนึงถึงเหตุผลของคุณ นี่คือวิธีเข้าถึงโปรแกรมจำลองเบราว์เซอร์มือถือใน Google Chrome, Mozilla Firefox, Microsoft Edge และ Opera:

สารบัญ

1. วิธีเปิดและใช้งานโปรแกรมจำลองเบราว์เซอร์มือถือใน Google Chrome
2. วิธีเปิดและใช้งานโปรแกรมจำลองเบราว์เซอร์มือถือใน Mozilla Firefox
3. วิธีเปิดและใช้งานโปรแกรมจำลองเบราว์เซอร์มือถือใน Microsoft Edge
4. วิธีเปิดและใช้งานโปรแกรมจำลองเบราว์เซอร์มือถือใน Opera
5. คุณพอใจกับตัวเลือกการจำลองเบราว์เซอร์บนมือถือหรือไม่?

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

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

เข้าถึงเครื่องมือสำหรับนักพัฒนาใน Google Chrome

คลิกหรือกดเลือกปุ่ม"สลับแถบเครื่องมืออุปกรณ์" (ดูเหมือนสมาร์ทโฟนถัดจากแท็บเล็ต) หรือกดCTRL + Shift + Mบนแป้นพิมพ์ เปิดใช้งานแถบเครื่องมืออุปกรณ์ที่โหลดหน้ามือถือ ตามค่าเริ่มต้น แถบเครื่องมือของอุปกรณ์จะใช้เทมเพลต ที่ปรับเปลี่ยนตามอุปกรณ์ สำหรับไซต์ที่คุณโหลด คลิกและเลือกอุปกรณ์มือถือที่คุณต้องการจำลอง ตัวเลือกของคุณ ได้แก่ iPhone, iPad, Surface Duo, อุปกรณ์ Samsung Galaxy สองเครื่อง และโปรแกรมจำลองเบราว์เซอร์มือถือ Moto G4 สำหรับพีซี

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

เคล็ดลับ:น่าเสียดาย คุณสามารถใช้ แป้นพิมพ์ลัด CTRL + Shift + Mได้หลังจากเปิดใช้งานเครื่องมือสำหรับนักพัฒนาเท่านั้น

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

การปิดโปรแกรมจำลองเบราว์เซอร์มือถือ Google Chrome

เคล็ดลับ:หากคุณเป็นผู้ใช้ Google Chrome จำนวนมาก คุณอาจต้องการเรียนรู้วิธีใช้ตัวเลือกการควบคุมสื่อของ Google Chrome

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

ใน Mozilla Firefox ให้เปิดไซต์ที่คุณต้องการใช้โปรแกรมจำลองเบราว์เซอร์บนมือถือ จากนั้นกดCTRL + Shift + Mบนแป้นพิมพ์หรือคลิกปุ่มเบอร์เกอร์ที่มุมบนขวาเพื่อเปิดเมนูของ Firefox แล้วเลือกWeb Developer

เข้าถึงเครื่องมือสำหรับนักพัฒนาเว็บใน Firefox

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

เลือกโหมดการออกแบบที่ตอบสนองใน Firefox

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

คุณสามารถจำลองเบราว์เซอร์มือถือสำหรับ iPhone, iPad, Kindle Fire (Firefox เป็นเบราว์เซอร์เดียวที่เสนอตัวเลือกการจำลองนี้) และอุปกรณ์ Samsung Galaxy S9

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

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

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

คุณกลับสู่โหมดการเรียกดูเดสก์ท็อปมาตรฐาน

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

Microsoft Edge ใช้เอ็นจิ้นการเรนเดอร์เดียวกันกับ Google Chrome และเสนอตัวจำลองเบราว์เซอร์ของสมาร์ทโฟนตัวเดียวกัน หากต้องการเข้าถึง ให้ไปที่เว็บไซต์ที่คุณต้องการทดสอบ แล้วกดปุ่มCTRL + SHIFT + Iบนแป้นพิมพ์หรือคลิกจุดแนวนอนสามจุด ( “การตั้งค่าและอื่นๆ” ) ที่มุมบนขวาของ Microsoft Edge ในเมนูที่ปรากฏขึ้น ให้ไปที่More toolsจากนั้นไปที่Developer Tools

เข้าถึงเครื่องมือสำหรับนักพัฒนาใน Microsoft Edge

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

เข้าถึงโปรแกรมจำลองเบราว์เซอร์มือถือใน Microsoft Edge

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

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

ตอนนี้คุณกลับสู่โหมดการเรียกดูเดสก์ท็อปมาตรฐานแล้ว

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

ใน Opera ให้ไปที่หน้าเว็บที่คุณต้องการดูราวกับว่าคุณกำลังใช้อุปกรณ์มือถือ จากนั้นคลิกไอคอน Opera ที่ด้านบนซ้าย ( “ปรับแต่งและควบคุม Opera” ) ในเมนูที่เปิดขึ้น ให้เลือกDeveloperตามด้วยDeveloper tools หากคุณต้องการแป้นพิมพ์ ให้กดแป้น CTRL+Shift+Iเพื่อให้ได้ผลลัพธ์เดียวกัน

เข้าถึงเครื่องมือสำหรับนักพัฒนาใน Opera

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

เข้าถึงตัวจำลองเบราว์เซอร์มือถือใน Opera

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

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

คุณพอใจกับตัวเลือกการจำลองเบราว์เซอร์บนมือถือหรือไม่?

ตอนนี้คุณรู้วิธีเลียนแบบอุปกรณ์มือถือทุกประเภทในเว็บเบราว์เซอร์ที่คุณชื่นชอบแล้ว อย่างไรก็ตาม คุณอาจสังเกตเห็นว่าเว็บเบราว์เซอร์ส่วนใหญ่มีตัวเลือกการจำลองแบบเดียวกับที่ใช้กับ iPhone และ iPad หากคุณต้องการเลียนแบบสมาร์ทโฟนหรือแท็บเล็ต Android รุ่นใหม่ โอกาสของคุณค่อนข้างน้อย แม้แต่ใน Google Chrome - เบราว์เซอร์ที่พัฒนาโดยบริษัทที่อยู่เบื้องหลัง Android หากคุณต้องการผลลัพธ์ที่ดีที่สุด คุณอาจต้องใช้สองเบราว์เซอร์สำหรับงานนี้: Chrome และ Firefox หรือ Firefox และ Edge หรือ Opera ก่อนที่คุณจะไป โปรดบอกเราว่าคุณคิดอย่างไรเกี่ยวกับตัวเลือกที่มีให้