View source | Discuss this page | Page history | Printable version   

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:

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:

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.

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:

WinResizer 1.png


WinResizer 2.png


WinResizer 3.png

Retrieved from "http://wiki.openbravo.com/wiki/Retail:Developers_Guide/How-to/How_to_test_screen_resolutions"

This page has been accessed 2,427 times. This page was last modified on 4 February 2016, at 17:30. Content is available under Creative Commons Attribution-ShareAlike 2.5 Spain License.