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

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

ในGoogle Chromeให้ไปที่เว็บไซต์ที่คุณต้องการดูในโปรแกรมจำลองเบราว์เซอร์มือถือ จากนั้น ให้กดCTRL + SHIFT + Iบนแป้นพิมพ์ หรือคลิกจุดแนวตั้งสามจุดที่มุมบนขวาด้วยเมาส์ เพื่อเปิดเมนู" ปรับแต่งและควบคุม Google Chrome" ^{(“Customize and control Google Chrome”)}เลือกเครื่องมือเพิ่มเติม^{(More tools, )}ตามด้วยเครื่องมือสำหรับนักพัฒนา^{(Developer Tools)}

เข้าถึงเครื่องมือสำหรับนักพัฒนา^{(Access Developer Tools)}ในGoogle Chrome

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

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

เคล็ดลับ:^(TIP:)ขออภัย คุณสามารถใช้ แป้นพิมพ์ลัด CTRL + Shift + Mหลังจากเปิดใช้งานเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์แล้วเท่านั้น

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

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

เคล็ดลับ:^(TIP:)หากคุณเป็นผู้ใช้Google Chromeจำนวนมาก คุณอาจต้องการเรียนรู้วิธีใช้ตัวเลือกการควบคุมสื่อของ Google^{(how to use Google Chrome’s media control options)} Chrome

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

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

เข้าถึง เครื่องมือ สำหรับนักพัฒนาเว็บ^{(Web Developer)}ในFirefox

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

เลือกโหมดการออกแบบที่ตอบสนอง^{(Responsive Design Mode)}ในFirefox

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

How to use the mobile browser emulator in Chrome, Firefox, Edge, and Opera -

Dо you need to access a ѕmartphone browser emulator on your PC to test the mobile version of а website you are interested іn? Maybe you are a web develoрer, or you want tо become one, and yоu need to simulate a mobile browѕer for the proјect you are working on. Regardless of your reasons, here is how to access a mobile browser emulator in Goоgle Chrome, Mozilla Firefox, Microsoft Edge, and Opera:

How to turn on and use the mobile browser emulator in Google Chrome

In Google Chrome, navigate to the website that you want to view in the mobile browser emulator. Then, either press the CTRL + SHIFT + I keys on your keyboard or, with the mouse, click the three vertical dots in the top-right corner to open the “Customize and control Google Chrome” menu. Choose More tools, followed by Developer Tools.

Access Developer Tools in Google Chrome

Click or tap on the “Toggle device toolbar” button (it looks like a smartphone next to a tablet) or press CTRL + Shift + M on your keyboard. This activates the device toolbar where the mobile page is loaded. By default, the device toolbar uses a Responsive template for the site you loaded. Click on it and choose the mobile device that you want to emulate. Your options include many iPhones, iPads, Surface Duo, two Samsung Galaxy devices, and a Moto G4 mobile browser simulator for PC.

How to enable the mobile browser emulator in Google Chrome

TIP: Unfortunately, you can use the CTRL + Shift + M keyboard shortcut only after enabling the developer tools.

Navigate the site you want to test, switch between the different smartphones and tablets, and see how it looks. When you are done, press the X (Close) button in the top-right corner of Google Chrome’s developer tools to get back to the standard desktop browsing mode.

Closing the mobile browser emulator Google Chrome

TIP: If you are a heavy Google Chrome user, you may also want to learn how to use Google Chrome’s media control options.

How to turn on and use the mobile browser emulator in Mozilla Firefox

In Mozilla Firefox, open the site for which you want to use a mobile browser simulator. Then, either press CTRL + Shift + M on your keyboard or click the burger button on the top-right corner to open Firefox’s menu, and choose Web Developer.

Access the Web Developer tools in Firefox

You see a menu filled with tools that are useful to web developers. In the list, select “Responsive Design Mode,” and this particular mode of viewing a web page is loaded in Firefox.

Choose the Responsive Design Mode in Firefox

Firefox enables the Responsive Design Mode. At the top of the window, you see the parameters used by this emulation mode. If no device is selected, click or tap on Responsive to open a drop-down list with devices available for emulation, and then choose the one that you want to simulate.

You can simulate the mobile browser for many iPhones, the iPad, the Kindle Fire (Firefox is the only browser to offer this emulation option), and Samsung Galaxy S9 devices.

Use the mobile browser emulator in Firefox

When you’re done testing with the smartphone browser emulator, press the X (Close Responsive Design Mode) button on the top-right corner of Mozilla Firefox.

Close the mobile browser emulator in Firefox

You are back to the standard desktop browsing mode.

How to turn on and use the mobile browser emulator in Microsoft Edge

Microsoft Edge uses the same rendering engine as Google Chrome and offers the same smartphone browser emulators. To access them, visit the website that you want to test, and either press the CTRL + SHIFT + I keys on your keyboard or click the three horizontal dots (“Settings and more”) in the top-right corner of Microsoft Edge. In the menu that appears, go to More tools and then to Developer Tools.

Access the Developer tools in Microsoft Edge

Click the “Toggle device emulation” button (it looks like a smartphone next to a tablet) or press CTRL + Shift + M on your keyboard. This activates the mobile browser emulator toolbar. By default, it uses a Responsive template for the site you loaded. Click on it and choose the mobile device that you want to emulate. Your options include the same smartphones and tablets as Google Chrome.

Access the mobile browser emulator in Microsoft Edge

Browse the site you want to test, change between the different mobile devices, and see how it looks. When you are done, press the X (Close) button in Microsoft Edge’s top-right corner.

Close the mobile browser emulator in Microsoft Edge

You are now back to the standard desktop browsing mode.

How to turn on and use the mobile browser emulator in Opera

In Opera, visit the web page that you want to view as if you were using a mobile device. Then click the Opera icon on the top-left (“Customize and control Opera”). In the menu that opens, choose Developer followed by Developer tools. If you prefer the keyboard, press the CTRL+Shift+I keys for the same result.

Access the Developer tools in Opera

The Developer tools are displayed on the right side of the browser window. Click the “Toggle device toolbar” button (it looks like a smartphone next to a tablet) or press CTRL + Shift + M on your keyboard. The device toolbar is shown on the left. By default, it uses a Responsive template for the site you loaded. Click on it and choose the mobile device that you want to emulate from the list of options. Opera offers the same mobile browser emulators as Google Chrome and Microsoft Edge, as it is based on the same rendering engine (Chromium).

Access the mobile browser emulator in Opera

When you are done testing, press the X (Close) button in the top-right corner to get back to the standard desktop browsing mode.

Close the mobile browser emulator in Opera

Are you happy with the mobile browser emulation options available?

Now you know how to emulate all kinds of mobile devices in your favorite web browser. However, you might notice that most web browsers offer the same emulation options that favor iPhones and iPads. If you want to emulate a modern Android smartphone or tablet, your chances are pretty slim, even in Google Chrome - the browser developed by the company behind Android. If you want the best results, you might need to use two browsers for this task: Chrome and Firefox, or Firefox and Edge or Opera. Before you go, tell us what you think about the available options.

Related posts

• วิธีปิดแท็บใน Chrome, Firefox, Microsoft Edge, และ Opera

• วิธีการพิมพ์บทความโดยไม่ต้องโฆษณาในเบราว์เซอร์ที่สำคัญทั้งหมด

• วิธีปักหมุดเว็บไซต์ไปยังทาสก์บาร์หรือ Start Menu ใน Windows 10

• วิธีทำ Chrome The default browser ใน Windows 10 (Firefox & Opera)

• วิธีการเปลี่ยน default browser ใน Windows 11

• วิธีฮาร์ดรีเฟรชหน้าในเบราว์เซอร์ของคุณบน Mac (Safari, Chrome, Firefox และ Opera)

• วิธีการเปลี่ยนตำแหน่ง Microsoft Edge download

• วิธีการซูมเข้าและซูมออกใน web browser ของคุณ

• วิธีการที่จะได้รับการกำหนดค่าและลบ Microsoft Edge นามสกุล

• Put Chrome และเบราว์เซอร์อื่น ๆ ในแบบเต็มหน้าจอ (Edge, Firefox และ Opera)

• 7 วิธีที่เบราว์เซอร์ควรปรับปรุงการท่องเว็บแบบส่วนตัว (Incognito, InPrivate ฯลฯ)

• 12 วิธีในการจัดการแท็บใน Microsoft Edge

• เกี่ยวกับ InPrivate and Incognito มีอะไรเรียกดูแบบส่วนตัว? Which browser ที่ดีที่สุด?

• วิธีการเริ่มต้นใน Microsoft Edge Windows 10 (12 วิธีที่)

• วิธีตั้งค่าแท็บด้านข้างใน Microsoft Edge และใช้งานในภายหลัง

• วิธีที่จะทำให้ Google search engine ของฉันใน Microsoft Edge

• วิธีการยกเลิกการปิดกั้น Adobe Flash Player ใน Google Chrome

• Go incognito กับ shortcut key ใน Chrome ที่ Edge, Firefox และ Opera

• วิธีการบล็อกคุกกี้ของบุคคลที่สามใน Chrome, Firefox, Edge, และ Opera

• วิธีการหยุด Chrome จากการขอให้บันทึกรหัสผ่าน