Test how your product looks in print mode.Ĭlick the Emulate vision deficiencies ( ) button to test the user experience of the current webpage with different visual deficiencies.Use the Emulate CSS media features button ( ) to: Your options include many iPhones, iPads, Surface Duo, two Samsung Galaxy devices, and a Moto G4 mobile browser simulator for PC. Click on it and choose the mobile device that you want to emulate. To change the viewport dimensions, click the Width and Height dropdown menus:Ĭlick the Rotate button ( ) to rotate the viewport between portrait and landscape orientation: By default, the device toolbar uses a Responsive template for the site you loaded. For example, there are several emulated iPhone layouts: It shows what your page looks like inside the mobile device browser. When you select a device, the viewport resizes to the correct measurements and simulates the touch interface. The Mobile Browser Simulator contains a frame that emulates a target device.
In the Emulate devices dropdown menu, you can select from a number of different devices, or the default option of Responsive. To reproduce the UI shown here, see Opening DevTools by right-clicking an HTML file in Opening DevTools and the DevTools browser. In the Edge DevTools: Browser tab, the Device Emulation toolbar on the bottom enables you to simulate different environments:
