• User's Guide

  • Presenting responsively designed websites and testing your website responsiveness

Our default settings

  • Unless you specify otherwise, the prefix "https://" is automatically prepended to the URL you enter in the address field.

  • The page load time-out is set to 30 seconds, after which the loading is aborted automatically.

  • The background of the devices is set to white after the requested page has been loaded.

  • All devices are displayed with their original physical sizes and their relative sizes to each other are also preserved during scaling.

  • The corresponding device pixel ratios (retina display) are applied to the screens of all devices to provide an accurate display resolution.

  • Assuming that you use this tool from your desktop it autodetects the scrollbar width and corrects the screen frames with the detected width to avoid breakpoint sliding.

Heads up!

  • The screen sharing function requires the guests to have HTTP sites enabled in their browser if the host is presenting an HTTP site.

  • The localhost URL is only available for screen sharing if both the host and the guests have the same environment on their computers.

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: support@ondeviceapp.com

What can go wrong?

  • 'Mixed content'

    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.

  • 'X-Frame-Options'

    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. Most social site use this option, so they can not be loaded (directly or after click through from other pages) by the application. 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.

    Refining the test results

  • Device list

    Devices are listed by their most common brand names along with their screen sizes, native resolutions and market shares.

  • Scaling options

    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.

  • Scrollbar width

    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.

  • Screen sharing

    You can share your workspace with an unlimited number of guests while keeping the control of the presentation in your hands. By clicking on the "Generate Credentials" button the platform creates a unique URL and a Token which you need to send to your guests to initiate the connection. Scaling, rotating, device changing or URL changing will be visible for your connected guests. The connection lasts until the guests close their browser window and/or you terminate the screen sharing.

    Some convenient features

  • 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.

  • Device rotation

    In the case of mobile and tablet devices, there is a single-click option to switch between landscape and portrait views.

  • Reset settings

    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".

  • Presentation mode

    Switching to 'Presentation' mode hides the detailed settings and ensures a distraction-free interface for presentation purposes.

  • Multi-browser control

    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.

To the top