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.
- SELECT View > developer > developer tools
- FIND phone and tablet icon, CLICK it
- SELECT Device name
(You can also select the orientation, which is on the same toolbar.
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.
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.