๐Ÿ“– Mobile First Web Design /
Module: Getting Started

Testing environment

๐Ÿ“– Mobile First Web Design / Getting Started / Testing environment

Testing in real devices

Beside simulating our web in the mobile simulator, we need to have real devices to further test it.

Not only because simulator cannot simulate all the things, but also because holding the web on hand is important. We need the feeling of scrolling the screen, tapping on links and buttons, and inputting the form value with the virtual keyboard.

devices-photo-by-jeremy-keith.png 523 KB


Photo taken by Jeremy Keith.

On Testing Devices


  • Screen Min-Max
  • Performance Low-end - Mid-end

iOS

  • $4500 iPhone SE
  • $6500 iPhone XR

Android

  • $5500 Edge-curve S10
  • $4000 Huawei Mid-end
  • $1xxx Low-end

Inspecting mobile Safari in iOS


We can use inspector to inspect live mobile Safari via iOS and Mac.

Inspect Mobile Safari in macOS Safari


Here is how:
  1. open the Settings app
  2. go to Safari
  3. scroll down to Advanced
  4. enable the Web Inspector toggle