Change the device group, from mobile to tablets and so on!
Display tabs navigation
Use the same url for all instances(tabs)
Display height for mobiles
Display height for tablets
Display height for laptops and desktops
With/Without scrollbar width(16px)
Hide app header
Display social plugin (Fb)
Activate grey background
Responsive test application v3.0 (From mobile to 16k resolutions)
Hi everyone! A short introduction for this application is that this is a testing tool(online version), for all sites/shops/games/etc.. that has responsive condition set(css and js code)! I create this app, because a found application that doesn't support some options for testing and i was thinking that, it would be cool and much more easier to have it all in one. In this documentation i write some explanations about how to use it and to explain how it works.
To test it with better precision, please use different browsers like "Mozilla, Chrome, Opera, Safari, etc" Browsers that support iframe, and responsive css media Queries and js conditions.
Every info icon, has a different area explanations. Click the icon and will display information from that area.
If you hold the mouse on a specific element, a small(default tooltip) with information will be displayed.
For more options, use the "More options" button from the top right app!. On click, a drop-down menu, with more option will be displayed.
Inside the "More options(drop-down menu)", if you click an option, the specific menu item and menu icon will be colored red, and in this case you will know that you activate an option from the menu.
Important From the "More options(drop-down menu)" if you choose "Use the same url for all instances(tabs)", the application will run slower, because is generating the whole tabs/instances (mobile, tablets and laptop-desktop)
For a video display. Example: youtube video, please use the url from the youtube share option(inside the iFrame src attribute), "http://www.youtube.com/embed/FijBkSvN6N8", and remove the "s" from https.
For a simple site display. Example: hbo site, please use the default url "http://www.hbo.com/", without https.
Important is to wait, until the green bar is set to 100% and disappears in 2 seconds. And then the testing site/shop/etc... is ready to be test!
If you eliminate the s from the url and still not display the tested project, please right click on your mouse, and click on the "inspect element" option from the mouse menu, and go to console from your browser and if you see this kind of message: Refused to display 'http://site.com/path/' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'. or Load denied by X-Frame-Options: http://site.com/path/ does not permit cross-origin framing., in this case there are some problems with the access of the site through iframes! Please try another link from the site!
NEW: On the tab Custom size/resize display you will find the possibility to create your own media display. Use the inputs to choose your values and click on the Generate custom display button, to generate the dimensions for a specific display you choose. Still here you have a drop-down menu with a group of devices(default values) that could be on your hand. Select one of the default values and the simulator will display the values from the drop-down menu you choose.
On the bottom/left and bottom/right of the screen, you will find a navigation menu Screen NAV, which will help you navigation through the screen, if you choose a big dimension like 2k or 4k resolution display and you don't want to scroll up and down the tested app/site/etc... just to scroll the online test application. The app is set to support even 8k resolution! So go ahead, try it! ;-)