Tuesday, February 10, 2015

Emulating Mobile Devices using Google Chrome Developer Tools

If you are building your website for Responsive Design, chances are that you will want to be able to test various different screen sizes for your website to determine if your website renders correctly using a variety of different device sizes.

Well, fortunately, you can do just that using Google Chrome Developer Tools!

  1. Navigate to the website that you want to use for testing Responsive Design using Google Chrome
  2. Hit the F12 key to open the Chrome Developer Tools
  3. Click on the Mobile Device icon in the Chrome Developer Toolbar
  4. Select the type of Mobile Device you want to emulate
  5. You may need to refresh/reload the web page in your targeted emulated device to get the Viewport information to render correctly (by hitting the F5 key).
That is all there is to getting your website to test rendering for different mobile devices/different screen sizes!

No comments:

Post a Comment