This tutorial aims to show a simple method of testing the behavior of a website’s code relative to the client device’s screen using Chrome’s built-in developer features.

Note, this works best when your window is maximized, as in taking up the entire screen.

  1. SELECT View > developer > developer tools
    • Screen Shot 2016-03-19 at 6.32.03 PM
  2. FIND phone and tablet icon, CLICK it
    • Screen Shot 2016-03-19 at 6.32.19 PM
  3.  SELECT Device name
    (You can also select the orientation, which is on the same toolbar.

    • Screen Shot 2016-03-19 at 6.32.29 PM

When you hover your mouse pointer above it, you will see a circle, which simulates your finger input on an actual phone. This is good for testing, as you cannot hover with a finger on a mobile device, the way you can with a mouse.

Instructor note

There are more thorough ways of doing this, such as using Xcode’s iOS simulator on OS X, or using the Android Studio’s emulators. However, the method brought forth in yhis lesson is good enough for the majority of entry-level web developers.

Testing your website’s responsiveness

Post navigation

Leave a Reply

Your email address will not be published. Required fields are marked *