We have prepared a default list of the most commonly used devices set for your convenience so you can start to test your responsive design immediately.
What differences cannot be eliminated compared to real life devices?
Differences between the devices' physical size and displayed sizeThe devices displayed on your monitor can look slightly smaller or larger than their real-life counterparts, depending on the physical pixel size of your monitor. You can read more about the details on Sebastien Gabriel's site: Designer's guide to DPI.
Personal scrollbar settingDue to the inconsistency among different browsers in interpreting the width of the targeted display area of the output device, it is important to control the scrollbar width to ensure that the media query breakpoints occur the same way they do on real devices. However, the importance of the pixel perfect application of media queries is highly dependent on the design. You can read more about the scrollbar issue on Sitepoint's page: Responsive Web Design and Scrollbars: Is Chrome's Implementation Better?
Mobile vs desktop versions of browsers
The default mobile browsers and the mobile versions of the most common browsers can be slightly different from their desktop counterparts in terms of applying style sheet declarations.
Variations in device specificationsThe measurements used to calculate the displayed device sizes were gathered from several different sources over the Internet. Differences between the available device specifications, however, can cause minor differences in the final device size displayed. We constantly review the measurements and correct the final sizes. Also, we are more than happy to receive custom measurements through the following email: email@example.com
What can go wrong?
We load the resources over secure HTTPS channel. If you need to test sites coming from a non-encrypted HTTP channel, you need to modify the default browser settings. Check our 1 minute video guide how to enable mixed content for Google Chrome and enable mixed content for Mozilla Firefox . For Firefox, there is a browser plugin available, known as the Toggle Mixed Active Content plugin by Fredy. Safari does not block mixed content and should not be an issue. Internet Explorer support is currently in progress for the platform. If you need more information about the 'mixed content' issue, you can read about it on Mozilla Developer's site: Mixed content.
Some pages cannot be displayed in a frame due to the X-Frame-Options HTTP response header used to indicate whether a browser should be allowed to render a page in a frame, iframe or object. If you are the site owner, you need to remove this code line during the responsive testing. In case you need more information about the 'X-Frame-Options' issue, you can read about it on Mozilla Developer's site: X-Frame-Options.
Missing 'viewport meta tag'
A typical mobile-optimised site contains a 'viewport meta tag' to disable auto zooming of the viewport by mobile browsers. Missing this code line results in squeezing every page layout into a tiny mobile window, instead of displaying the intended responsive layout. You can read more about it on Mozilla Developer's site: Using the viewport meta tag to control layout on mobile browsers.
Devices are listed by their most common brand names along with their native resolutions and market shares.
The default scaling is 100%, which is the original device size. You can scale down the viewport for a better overview by setting the scaling to Auto fit, which would maximise the height of the viewport according to the visible screen portion. The additional scaling options, namely 25%, 50% and 75%, are related to the original device sizes.
By default, the platform detects the browser you are testing on and corrects the devices' viewport width according to that browser's standard. If you are unsure about the scrollbar width of the browser on your device, you can test the browser scrollbar for PC. The browser, and the skin of the browser that usually overrides the operating system default scrollbar setting, are taken into consideration by the auto-detect mechanism. However, if you want full control over the scrollbar width, you can choose from the default scrollbar widths of the most common operating systems, or set your own.
Refining the test results
Double horizontal scrollbar
There is a scrollbar placed on both the top and bottom of the viewport to make the horizontal navigation available from both positions.
In the case of mobile and tablet devices, there is a single-click option to switch between landscape and portrait views.
By default, settings are saved during the last visit, from the device list to the device rotation to the latest URL you tested, and reloaded upon the next visit. All these saved settings can be cleared by clicking on "Reset settings".
Switching to 'Presentation' mode hides the detailed settings and ensures a distraction-free interface for presentation purposes.
You can load the application in multiple instances of the same browser on a computer which has more than one display device attached to it and move any instance to another monitor. With this feature, you can control your presentation with the other browser instances on your device and also present the result on a large screen for the audience.