Tip: How to test UI "fit" against various mobile devices

I was creating an Alias page for a web/mobile app not originally designed for phones. We didn't expect the app to be popular with any except the customer for whom it was designed, and they were using computers only.

Well, guess what: folks love web/mobile apps for everyday tasks. So, money talks, and we went about creating an alias page for the one page in this small app that wouldn't work as is.

My initial design worked fine on my Galaxy Note 9, but would it work on an iPhone 6 (which was a requirement for one of our unexpected customers)?

The answer is, in fact, quite easy, and can be done in Chrome and probably other browsers (each with their own instructions).

Here are the steps:

1) In your dev environment, with Chrome as your default browser, use Live View to bring up the application. Navigate to the page in question.

2) With Chrome selected, press Ctrl+Shift+I and then Ctrl+Shift+M

3) Click the Devices icon (#1) and then select your device (#2)

Attachment 1861

When finished, toggle the Devices Icon (#1) and close the Developer console (the X on the righthand side of the developer console toolbar).

enjoy,

Hank