Last active
April 8, 2021 09:50
-
-
Save appelgran/daa957f7f511031de5136461803333c3 to your computer and use it in GitHub Desktop.
Responsive test tool for easy responsiveness evaluation (like Responsinator but better) (online at https://tools.easyweb.site/responsive-test-tool.html)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Responsive test tool</title> | |
| <style> | |
| body { | |
| margin: 0; | |
| background-color: #111; | |
| color: #fff; | |
| font-family: sans-serif; | |
| font-size: 0.8rem; | |
| line-height: 1.6; | |
| min-height: 101vh; | |
| } | |
| input[type="text"] { | |
| margin: 1rem; | |
| background-color: #444; | |
| border: none; | |
| height: 2rem; | |
| padding: 0 0.3rem; | |
| color: #eee; | |
| width: 320px; | |
| font-size: 0.6rem; | |
| } | |
| input[type="submit"] { | |
| height: 2rem; | |
| border: none; | |
| padding: 0 1rem; | |
| background-color: #1e1e46; | |
| color: #9d9eae; | |
| font-weight: bold; | |
| margin-left: 1rem; | |
| margin-right: 1rem; | |
| } | |
| input[type="submit"]:hover { | |
| color: #eee; | |
| } | |
| .error-message { | |
| line-height: 2rem; | |
| font-weight: bold; | |
| color: #9e3737; | |
| display: inline-block; | |
| margin-left: 1rem; | |
| margin-right: 1rem; | |
| } | |
| a { | |
| color: inherit; | |
| } | |
| .device-list { | |
| display: flex; | |
| flex-wrap: wrap; | |
| } | |
| .device { | |
| margin: 1rem; | |
| } | |
| .device .iframeHolder { | |
| overflow: hidden; | |
| } | |
| .device iframe { | |
| border: none; | |
| background-color: #fff; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <form onsubmit="init(); return false;"> | |
| <input type="text" class="js-url-input" placeholder="Paste URL here..." autofocus=""><input type="submit" value="Begin evaluation"><span class="error-message js-error-message"></span> | |
| </form> | |
| <div class="device-list js-device-list"></div> | |
| <div class="js-device-template" style="display:none"> | |
| <div class="device"> | |
| <div class="heading">{{heading}}</div> | |
| <div class="iframeHolder jsr-iframe-holder" style="width:{{iframeHolderWidth}}px; height:{{iframeHolderHeight}}px;"><iframe loading="lazy" src="{{iframeSrc}}" style="width:{{iframeWidth}}px; height:{{iframeHeight}}px;" class="jsr-iframe"></iframe></div> | |
| </div> | |
| </div> | |
| <script> | |
| var devices = [ | |
| {"name": "iPhone 5 (~5 %)", "size": "320x460", "dpr": 2}, | |
| {"name": "Ulefone Paris etc (<5 %)", "size": "360x512", "dpr": 2}, | |
| {"name": "Samsung S4 etc (>20 %)", "size": "360x567", "dpr": 3}, | |
| {"name": "Samsung S20 etc (>20 %)", "size": "360x670", "dpr": 4}, | |
| {"name": "iPhone 6-8, SE 2020 etc (>20 %)", "size": "375x553", "dpr": 2}, | |
| {"name": "iPhone X (>20 %)", "size": "375x634", "dpr": 3}, | |
| {"name": "iPhone 12 (<5 %)", "size": "390x664", "dpr": 3}, | |
| {"name": "iPhone 6-8+ (>20 %)", "size": "414x627", "dpr": 3}, | |
| {"name": "iPhone 11 (>20 %)", "size": "414x715", "dpr": 3}, | |
| {"name": "iPhone 12 Pro Max (<5 %)", "size": "428x746", "dpr": 3}, | |
| {"name": "iPad portrait (<5 %)", "size": "768x960", "dpr": 2}, | |
| {"name": "iPad portrait (<5 %)", "size": "810x1010", "dpr": 2}, | |
| {"name": "iPad landscape (<5 %)", "size": "1024x671", "dpr": 2}, | |
| {"name": "iPad landscape (<5 %)", "size": "1180x746", "dpr": 2}, | |
| {"name": "Laptop 12\" (1280x800) (~5 %)", "size": "1265x670", "dpr": 1}, | |
| {"name": "Laptop 13\" (1366x768) (>5 %)", "size": "1349x643", "dpr": 1}, | |
| {"name": "Laptop 17\" (1600x900) (~5 %)", "size": "1585x799", "dpr": 1}, | |
| {"name": "Desktop Full HD (1920x1080) (>5 %)", "size": "1905x950", "dpr": 1} | |
| ]; | |
| function init() { | |
| errorMessage(""); | |
| var template = document.querySelector(".js-device-template").innerHTML; | |
| var list = document.querySelector(".js-device-list"); | |
| var url = document.querySelector(".js-url-input").value.trim(); | |
| if (url.length === 0) { | |
| url = "about:blank"; | |
| } | |
| else if (url.indexOf("http") !== 0) { | |
| url = location.protocol + "//" + url; | |
| } | |
| else if (url.indexOf("http:") === 0 && location.protocol === "https:") { | |
| errorMessage("Embedding non-secure content (http:) won't work on this secured (https:) page. Try on <a href=\"http://tools.easyweb.site/responsive-test-tool.html?https=off\">this ?https=off link</a>."); | |
| return; | |
| } | |
| // | |
| // | |
| list.innerHTML = ""; | |
| var scrollbarWidth = getScrollbarWidth(); | |
| for (var x = 0; x < devices.length; x++) { | |
| var size = devices[x].size.split("x"); | |
| size = { width: parseInt(size[0]), height: parseInt(size[1]) }; | |
| list.innerHTML += template | |
| .replace("{{heading}}", devices[x].name + " - " + devices[x].size + " px") | |
| .replace("{{iframeSrc}}", url) | |
| .replace("{{iframeWidth}}", size.width + scrollbarWidth) | |
| .replace("{{iframeHeight}}", size.height) | |
| .replace("{{iframeHolderWidth}}", size.width) | |
| .replace("{{iframeHolderHeight}}", size.height); | |
| } | |
| } | |
| function getScrollbarWidth() { | |
| return window.innerWidth - document.body.getBoundingClientRect().width; | |
| } | |
| init(); | |
| // | |
| // | |
| // | |
| function errorMessage(msg) { | |
| document.querySelector(".js-error-message").innerHTML = msg; | |
| } | |
| // | |
| // | |
| // | |
| var _updateAccordingToScrollbarWidth_previous = 0; | |
| function updateAccordingToScrollbarWidth() { | |
| var scrollbarWidth = getScrollbarWidth(); | |
| if (scrollbarWidth !== _updateAccordingToScrollbarWidth_previous) { | |
| _updateAccordingToScrollbarWidth_previous = scrollbarWidth; | |
| var deviceIframeHolders = document.querySelectorAll(".js-device-list .jsr-iframe-holder"); | |
| for (var x = 0; x < deviceIframeHolders.length; x++) { | |
| var iframe = deviceIframeHolders[x].querySelector(".jsr-iframe"); | |
| iframe.style.width = "calc(" + deviceIframeHolders[x].style.width + " + " + scrollbarWidth + "px)"; | |
| } | |
| } | |
| } | |
| setInterval(updateAccordingToScrollbarWidth, 1000); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment