Responsisualizer - Responsive web screen visualizing
Webmaster Tools Programmer
Responsisualizer 2.3, February 2017 - Created by Bosse at AutonomTech.se
Visualizes websites at 18 different screen resolutions, for a quick live view of responsive web pages design layouts.
Each simulated device can be magnified to scale 1.00 (1:1) in lightbox mode, or as large as will fit in the browser window.
One also got a statistic average load time of each simulated device web page, below the simulated devices here.
The visualization is based on CSS pixels and not pixel density, thus the device sizes depends on the pixel density of your screen!
It doesn´t emulate different devices, it´s just a raw visualization of webpages at different browser viewports real word dimensions!
This also acts as a sort of a stress test on the target website, by making 18 almost simultaneous web requests.
All use of this tool is "as is" and the use is of the user´s own risk, consequences and responsibility.
N.B. A website can have set a X-Frame-Options or a Content-Security-Policy that blocks it from being viewed in an iframe on this webpage (or any other site).
If it´s the case you will get no visualizing and thus empty iframe-screens.
NOTE! It takes some time to load all the 18 web page requests - be patient! → Loading... 
18 instances of a web page allocates a lot of RAM memory on your device!
More technical info below.
Browser: 768x928
Browser: 375x559
Br:320x372
Br:320x460
Br: 414x628
Br: 360x559
WP10 360x544
Br: 640x280 WP10 592x312
Br: 412x652
Browser: 720x1038
Browser: 800x1111
Technical info:
N.B. If the design of the target web page is based on the units "em" or "ex" it will not show up here fully as on the real screens.
Also the size of medium font-size vary between devices set by the OS / browser, but is here based on the device you view this on.
On a touchscreen only device will not the scrollbar show up in the visualizing, nor in tablet mode in Windows 10.
All the visualized screens are live and one can scroll, use menu and surf via each of them.
Some webpages are blocked from beeing viewed in an iframe and will not be visible here in Responsisualizer.
Some websites uses browser sniffing to supply a dedicated mobile version, which will fail if you is on a Laptop or a Desktop computer.
Some web page content are blocked due to the same origin policy, like some ads.
The screen sizes are selected based on visitor statistics of my web site 2017-01-24 (≈ 2k unique visitors a month, 48% desktops, 34% mobile phones, 18% tablets).
The Browser window sizes are the median values of the statistics for browser windows from real visits.
(But I am thinking of changing it to the most frequent browser window size.)
For more precise results one must test on real physical devices, either in an own lab or pay for external resources like BrowserStack, CrossBrowserTesting or BrowserShots.
But you need to keep in mind that users can change the text size in the browser and thus affect the layout.
(If the browser has the performance timing API.)
Browser plugins installed:
Navigator Object info:
Version release history:
| 2.3, 2017-02-20 | Added live colour coded loading status info. Now adds the http:// if missed in the typed URL. Scrolls down to view loading info at started simulation. Added some more technical info. Removed the start visualizing of my web URL http://www.autonomtech.se/ to decrease server load. |
| 2.2, 2017-02-19 | Code improved with the lightbox device div-block fixed after size transition finished and some functionality made more stable and precise. Performance timing section improved and an installed browser plugins section added. |
| 2.1, 2017-02-17 | Added a loading symbol to the viewing of a device in the lightbox mode. And some other minor refinements. |
| 2.0, 2017-02-08 | New functionality: Each simulated device can be magnified to scale 1.00 (1:1) in lightbox mode, or as large as will fit in the browser window. |
| 1.2b, 2017-01-24 | All the browser windows of the simulated devices are now updated with current median values of the sizes, from tracked real word data. Four new simulated devices added, with new screen dimensions. Makes 18 simulated devices now. |
| 1.1b, 2017-01-18 | Layout reworked and now integrates in my common web platform |
| 1.0b, 2014-04-15 | The first test version with its own webpage layout. |
