Retail:Developers Guide/How-to/How to test screen resolutions

Introduction

This document aims to explain the best way to configure the browser screen resolution in order to avoid the oversight of UI issues while designing, developing or testing WebPOS features.

Screen resolutions and aspect ratios

The WebPOS has some particularities not present in a standard website:

• It must not have a global horizontal/vertical scrollbar, so all the main components should be always visible. PS: Sub-components (like the ticket) can implement its own scrollbar.
• It has a css zoom property that adapts the layout to fill the whole browser size. This specially useful with touch screens.

These both characteristics, in conjunction with the fact that the WebPOS can run in different kind of screens (standard displays, retina, ...) having different dppx (dots-per-physical-inch), imply that we should speak about aspect ratios instead of screen resolutions.

Given this, there are two points that must be taken into account by the designer and the developer:

• In order to render in the screen all the components in true magnitude, the browser height should be set to 700px, which is the height where the css zoom property equals "1". With this height set, all the pixels of the rendered components will match the pixels ('px') defined in the CSS.
• The other point is the aspect ratio. The WebPOS supports the following minimum aspect ratios:
  • Landscape 4:3 (all iPads, several Android tablets, ...)
  • Portrait 16:9 (iPhone >= 5, most of Android smartphones, ...)

Of course that higher aspect ratios like, for example, Landscape 16:10 (some Android tablets, ...) or Portrait 3:2 (iPhone < 5), should be supported too, but this is guaranteed with the support of the minimum one.

Combining the two previous points we get the two resolutions where, at least, all the WebPOS interfaces should be rendered in a proper and usable way.

• Landscape 933x700
• Portrait 393x700

Testing the application in these resolutions could not guarantee that exists a corner case where, with another different supported resolution/aspect ratio, the interface be bad rendered, but, what is sure is that if the application doesn't look properly with these aforementioned resolutions, there will be several devices where the UI won't be ok.

How to setup the Chrome browser

The suggested Chrome plugin to set these resolutions in an easy way is Window Resizer. In Chrome Developer Tools there is an option to test mobile devices where a custom resolution could be set, but this method is not recommended because its pixels processing and touch screen emulation could lead to bad results.

The Window Resizer plugin can be configured as it follows: