To validate the responsive design of website in mobile devices in the desktop Chrome browser - Follow these steps:
- Open the responsive design website in Google chrome browser (e.g http://www.blackouttees.com)
- Right Click and click on "Inspect element"
- Developer debugger will be displayed
- Click on Show Drawer '>='
- Console, search, Emulation and Rendering tab will be displayed
- Click on Emulation
- Select the mobile device from the "Model drop down" field. e.g Google Nexus 5
- You will get most of the latest all mobile/tablet/notebook devices from the list
- Default "Emulate mobile" , "Enable text autosizing" will be selected, if not select also select Shrink to Fir for the best view
- Refresh the browser. you'r Done -
- You can view the site in Mobile view.
- Default displayed in Portrait mode, To view in Landscape mode, in the resolution click on Swap dimensions - site will be displayed in Landscape mode.
In the top developer debugger tab : you can disable the emulator by clicking Mobile device icon
tool tip : Toggle Emulation
No comments:
Post a Comment