How to test for the huge variety of mobile devices resolutions?!

Forum Moderators: not2easy

Message Too Old, No Replies

How to test for the huge variety of mobile devices resolutions?!

born2run

8:16 am on Aug 20, 2017 (gmt 0)

So I'm at my wit's end. I used Google Analytics to find out that about 70% of my site's visitors are using mobile/Tablets.

So, I have about a list of top 50 mobile devices that visit my site, and all are of different resolutions, some in portrait or some in landscape mode!

My question is, what is a comprehensive, yet easy way to test my website for all these resolutions?

Should I tell my developer to run thru the resolution list with Chrome (developer view) and simulate all these resolutions on my main website? Or there is a better way?

Please advise. Thanks!

keyplyr

9:01 am on Aug 20, 2017 (gmt 0)

A responsive design should adjust for all devices. If your layout is done correctly, there should be no problem.

There are a few emulators floating around you could use but in my experience, none work that well.

You can of course just resize screen to the real estate of the various devices.

topr8

10:07 am on Aug 20, 2017 (gmt 0)

Personally i bought an old iphone 5s on ebay, a new amazon fire and have a 4 year old samsung phone ... (as well as my desktop of course).

i test on these 3 devices.

>>A responsive design should adjust for all devices. If your layout is done correctly, there should be no problem.
completely agree with keyplyr

but also ... IMO, resolution is only half the story ... because infact the latest phones have very high resolutions yet still have a small screen ... it is also the fact that using a website with your finger is a totally different experience to using a mouse and keyboard ... you should give this great thought too.

not2easy

3:02 pm on Aug 20, 2017 (gmt 0)

For Google's concern all their determinations are done using portrait mode though landscape mode is commonly used by visitors. Your @media css should be based on portrait mode widths. You do not need to know resolution so long as you scale to "1" the device knows what to do to translate its hardware pixels (or device pixels).

<meta name=viewport content="width=device-width, initial-scale=1">

Avoid the use of various limiting instructions in your viewport tag such as "minimum-scale", "maximum-scale", "user-scalable" to allow the device to calculate its own resolution. Much more info from Google about viewports [developers.google.com]

I would not use a Chrome browser for testing appearance unless you know for a fact that the css for the page includes a "Chrome Fix" because there is a bug in Chrome that can affect font size rendering because REM units are not applied correctly to <body>. The page will appear different in Chrome than in IE, Edge, Safari, FF or any other compliant browser. If the css uses REM units for fonts, refreshing a page will change the appearance. To correct for the bug you can add a Chrome fix to the css (always a good idea, so that all visitors see the page as it is intended to look):

body > div { font-size: 1.6rem; }