Copy the url and paste it inside the input, then click on the green button or press enter!
information
Mobiles display Tablets display Laptops/Desktop display Custom size/resize display
Change the device group, from mobile to tablets and so on!
information More options to set
Loading...

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! ;-)
  • Documentation for the app simulation values(px values), are from "http://www.canbike.org/CSSpixels/", "http://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions", "http://www.textfixer.com/tutorials/browser-scrollbar-width.php".

    Here are the exact specifications for a bunch of current browsers that I had easy access to.

    BROWSERVERSIONSCROLLBAR WIDTH
    Chrome 34 17 pixels
    Internet Explorer 11 17 pixels
    Internet Explorer 10 17 pixels
    Firefox 29 17 pixels
    Firefox 28 17 pixels
  • Thanks for using this app!
  • If you find something that is not working correctly, please email me at equaltozero.ro@gmail.com, and i will come back with support! Have a good testing experience!
information

Mobile

Small Smartphone(320px w X 480px h)

BlackBerry Classic (360px w X 360px h)

HTC One (360px w X 640px h)

HTC Desire HD (320px w X 533px h)

iPhone 4 (320px w X 480px h)

iPhone 5 (320px w X 568px h)

iPhone 6 (375px w X 667px h)

iPhone 6+ (414px w X 736px h)

Samsung Galaxy S3,S4,S5 (360px w X 640px h)

LG g2 (360px w X 640px h)

LG g3 (480px w X 853px h)

Google Nexus 7 (604px w X 966px h)

Devices width 640px (640px w X 980px h)

Devices width 768px (768px w X 1024px h)

Tablets

iPad 1, iPad 2, iPad 3, iPad 4, iPad mini, iPad Air (768px w X 1024px h)

Galaxy Note (360px w X 640px h)

Galaxy Tab 10.1 (800px w X 1280px h)

Asus Nexus 7 (600px w X 960px h)

Kindle Fire HD 7 (533px w X 853px h)

Microsoft Surface (720px w X 1280px h)

Blackberry Passport (1440px w X 1440px h)

Apple MacBook Pro 15-inch Retina display (900px w X 1440px h)

Laptops and Desktop

Non-Retina-Screens and Retina-Screens (1600px w X 1200px h)

Laptop-standard (1280px w X 800px h)

Desktop-standard (1280px w X 1024px h)

Desktop-wide 21 (1680px w X 1024px h)

Desktop-wide 24 (1920px w X 1080px h)

Desktop-wide 27 - 2k (2560px w X 1440px h)

Desktop-wide 4k (4096px w X 2160px h)

Custom version

Selected device
Mobile
  • BlackBerry Classic (360px w X 360px h)
  • BlackBerry Z10 and Google Nexus 4 (384px w X 640px h)
  • Devices width 640px (640px w X 980px h)
  • Devices width 768px (768px w X 1024px h)
  • Google Nexus 7 (604px w X 966px h)
  • HTC One (360px w X 640px h)
  • HTC Desire HD (320px w X 533px h)
  • iPhone 4 (320px w X 480px h)
  • iPhone 5 (320px w X 568px h)
  • iPhone 6 (375px w X 667px h)
  • iPhone 6+ (414px w X 736px h)
  • LG g2 (360px w X 640px h)
  • LG g3 (480px w X 853px h)
  • LG Nexus 4 (456px w X 640px h)
  • LG Optimus G (424px w X 640px h)
  • LG Spectrum (VS920) (424px w X 753px h)
  • Samsung Galaxy S3,S4,S5 (360px w X 640px h)
  • Samsung Galaxy Mega 6.3 (400px w X 711px h)
Tablets
  • Apple MacBook Pro 15-inch Retina (900px w X 1440px h)
  • Asus Nexus 7 (600px w X 960px h)
  • Blackberry Passport (1440px w X 1440px h)
  • Galaxy Note (360px w X 640px h)
  • Galaxy Tab 10.1 (800px w X 1280px h)
  • iPad 1,2,3,4,mini,Air (768px w X 1024px h)
  • Kindle Fire HD 7 (533px w X 853px h)
  • Microsoft Surface (720px w X 1280px h)
  • Microsoft Surface Pro 3 (960px w X 1440px h)
Laptops
  • Laptop-standard (1280px w X 800px h)
  • Non-Retina/Retina-Screens (1600px w X 1200px h)
  • Apple MacBook Air "Core i5" 1.6 11" (Mid-2011) -(1366px w X 768px h)
  • Apple MacBook Air "Core i7" 1.8 13" (Mid-2011) -(1440px w X 900px h)
  • Apple MacBook Air "Core i7" 2.0 11" - 2nd Display Support: Dual/Mirroring* 2nd Max. Resolution: 2560x1600 (x2)
Desktop
  • Desktop-standard (1280px w X 1024px h)
  • Desktop-wide 21 (1680px w X 1024px h)
  • Desktop-wide 24 (1920px w X 1080px h)
  • Desktop-wide 27 - 2k (2560px w X 1440px h)
  • Desktop-wide 4k (4096px w X 2160px h)
  • Wide 8K - Full Ultra FUHD (7680px w X 4320px h)
  • Wide 16K QUHD (15360px w X 8640px h)
Device "width"
  • Devive width(320px w X 768px h)
  • Devive width(360px w X 768px h)
  • Devive width(375px w X 768px h)
  • Devive width(384px w X 768px h)
  • Devive width(400px w X 768px h)
  • Devive width(414px w X 768px h)
  • Devive width(424px w X 768px h)
  • Devive width(456px w X 768px h)
  • Devive width(480px w X 768px h)
  • Devive width(533px w X 768px h)
  • Devive width(600px w X 768px h)
  • Devive width(604px w X 768px h)
  • Devive width(640px w X 768px h)
  • Devive width(720px w X 768px h)
  • Devive width(768px w X 768px h)
Generate custom display Rotate display With/without scrollbar(+16px) information
Insert the value that you want to simulate! Remember to test the size width or without the 16-17px(for scrollbar)!
The "width" value is: 360px The "height" value is: 640px

Custom display simulator for default 360px W and 640px H