Mobile testing design
We need to perform an analysis in the context of designing mobile tests for XWiki.
Because a device with a particular screen size can have multiple resolutions, developers use viewports when they’re creating mobile friendly pages. Viewports are scaled down versions of resolutions that allows sites to be viewed more consistently across different devices. Viewports are often more standardized and smaller than resolution sizes.
According to Bootstrap documentation, https://getbootstrap.com/docs/3.4/css/#grid-media-queries, there are four key break-points in the grid system.
Therefore, we would need to define 4 intervals for testing:
After some research on https://gs.statcounter.com/screen-resolution-stats/mobile/ and on other places, these would be the chosen viewports for mobile testing design:
ViewPort 1: 360 x 740 (most new Samsung Galaxy mainstream phones)
ViewPort 2: 768 x 1024 (most iPads, Amazon Kindle Fire)
ViewPort 3: 1024 x 1366 (iPad Pro)
ViewPort 4: 1280 x 850 (Chromebook Pixel)
Other useful resources:
https://mediag.com/blog/popular-screen-resolutions-designing-for-all/
