A Free & Quick Tool to Check the Responsiveness of a Webpage Design

Here is a free & quick tool to check the responsiveness of any webpage, that we have designed. Just copy the entire code block below, to a Text Editor and save it with some name and .html extension, say, Rcheck.html and then view the file from your favorite Internet Browser. That's all. Hope you like this easy tool.

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Desktop, Tablet, Mobile Preview of Any Local Webpage</title>
  <meta name="robots" content="noindex, nofollow">

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/linuxguist/devices_preview@main/demo_vi.css">

<style type="text/css">

.forty_four_px {
  height: 44px !important;  
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
}

.icon {
  width:  44px !important;
  height: 44px !important;  
}

.preview-desktop {
  left: 0;
  width: 100%;
  height: 100%;
  margin-top: 140px !important;
}

.preview-tablet {
  margin-top: 140px !important;
}

.preview-mobile {
  margin-top: 140px !important;
}

.preview-devices {
  margin-left: 1%;
}

.urlinput {
  height: 44px !important;
  margin-top: 8px;
  margin-left: 4%;
}

.urlbutton {
  height: 44px !important;
  margin-top: 8px;
  margin-left: 1%;
}

</style>

  </head>

<body>

  <header id="header" class="forty_four_px">

<center>
<form method="post" target="preview-frame">
<input id="txtUrl" style="width:76%;" placeholder="Type the Local FILE NAME" name="url" type="text" class="urlinput" autofocus  />
<input style="width:14%;" type="submit" value="Go" onclick="setBrowserFrameSource(); return false;" class="urlbutton" />
</form>
</center>

    <div class="preview-devices forty_four_px">
      <ul>
        <li class="preview-test preview-devices-active" id="preview-test-desktop" title="Desktop preview of this webpage"><a href=""><img class="icon icon-preview" src="https://cdn.jsdelivr.net/gh/linuxguist/devices_preview@main/Desktop_Icon.png"></img></a></li>
        <li class="preview-test" id="preview-test-tablet" title="Tablet preview of this webpage"><a href=""><img class="icon icon-tablet" src="https://cdn.jsdelivr.net/gh/linuxguist/devices_preview@main/Tablet_Icon.png"></img></a></li>
        <li class="preview-test" id="preview-test-mobile" title="Mobile preview of this webpage"><a href=""><img class="icon icon-smartphone" src="https://cdn.jsdelivr.net/gh/linuxguist/devices_preview@main/Mobile_Icon_ii.png"></img></a></li>
      </ul>
    </div>

    <div class="navigate forty_four_px">
      <a href="https://example.com" target="_top" title="Hide the demo bar"><img class="icon icon-external-link" src="https://cdn.jsdelivr.net/gh/linuxguist/devices_preview@main/icon-external-link.png"/></img></a>
    </div>


<h2 style="text-align:left;background-color:Violet;color:black;padding-top:10px;padding-bottom:10px;font-size:16px;margin-left:10px;margin-right:10px;">Notes: Either copy your other html files to the same folder, containing this html file, for testing OR else use the file:///full_path/filename.html in the URL Text Box for testing. That's all. Codepen Full Url's can also be tested directly, by giving the file name like : https://codepen.io/nathan-sr/full/YzRpLVv &nbsp; Also, other Websites, which allow embedding into an iframe, can also be tested directly, by giving their URL.</h2>  

  </header>

  <div id="preview">
    <iframe id="preview-frame" class="preview-desktop" src="https://codepen.io/nathan-sr/full/YzRpLVv" frameborder="0"></iframe>
  </div>

      <script src="https://cdn.jsdelivr.net/gh/linuxguist/devices_preview@main/demo.js"></script>

<script type="text/javascript">
    function setBrowserFrameSource(){
        var browserFrame = document.getElementById("preview-frame");
        browserFrame.src= document.getElementById("txtUrl").value;
    }
</script>      

</body>

</html>

Blog

A Free & Quick Tool to Check the Responsiveness of a Webpage Design

Nathan S.R.

Join Our Newsletter. No Spam, Only the good stuff.

Related