Responsive Simulator

December 16, 2019

Responsive Device Simulator

Online tool to check a website on different dimensions

Live View

Please click here or the ‘Live View’ button below.

<!– form –>
<script type=”text/javascript”>
function setBrowserFrameSource(){
var browserFrame = document.getElementById(“browser”);
browserFrame.src= document.getElementById(“txtUrl”).value;
}
</script>
<!– /form –>

</head>

<div class=”description_text”>SCREEN SIZE SIMULATOR<span><medium>This tool uses your own browser settings. It doesn’t emulate the devices.</medium><br>Enter the FULL PATH of the URL you want to check and use the icons below to simulate.</span></div>

<!– form –>
<div class=”formwrapper”>
<form method=”post” target=”browser”>
<input name=”url” type=”text” id=”txtUrl” placeholder=”Put the website here” value=”http://” />
<input type=”submit” value=”Go” onclick=”setBrowserFrameSource(); return false;”/>
</form>
</div>
<!– /form –>

– – – – – – – – – –

<li>
<a class=”active” data-device-class=”device-laptop”>
<svg xmlns=”http://www.w3.org/2000/svg” width=”128″ height=”71″ viewBox=”26 2 128 71″ enable-background=”new 26 2 128 71″>
<title>Laptop</title>
<path d=”M144 68v-64.5c0-.8-.7-1.5-1.5-1.5h-105c-.8 0-1.5.7-1.5 1.5v64.5h-10v3.5c0 .8.7 1.5 1.5 1.5h125c.8 0 1.5-.7 1.5-1.5v-3.5h-10zm-50 2h-8c-1.1 0-2-.9-2-2h12c0 1.1-.9 2-2 2zm46-4h-100v-60h100v60z”/>
</svg>
</a>
</li>
<li>
<a data-device-class=”device-tablet”>
<svg xmlns=”http://www.w3.org/2000/svg” width=”63″ height=”84″ viewBox=”5 -27 63 94″ enable-background=”new 5 -27 63 94″>
<title>Tablet</title>
<path d=”M63.6-27h-54.2c-2.4 0-4.4 2-4.4 4.4v85.2c0 2.4 2 4.4 4.4 4.4h54.2c2.4 0 4.4-2 4.4-4.4v-85.2c0-2.4-2-4.4-4.4-4.4zm-27.1 4c.3 0 .5.2.5.5s-.2.5-.5.5-.5-.2-.5-.5.2-.5.5-.5zm0 88c-1.4 0-2.5-1.1-2.5-2.5s1.1-2.5 2.5-2.5 2.5 1.1 2.5 2.5-1.1 2.5-2.5 2.5zm28.5-7h-57v-76h57v76z”/>
</svg>
</a>
</li>

– – – – – – – – – –

CSS

– – – – – – – – – –

/* form */
.formwrapper {text-align:center;}
.formwrapper input {height:40px; margin:5px; box-sizing:border-box; border:0; font-size:14px; line-height:40px; padding:0 5px;}
.formwrapper input:first-child {width:60%; max-width:400px; background:#ddd;}
.formwrapper input:last-child {width:35%; max-width:60px; background:#eee;}
/* /form */

footer {width:80%; margin:50px auto; text-align:center; font-size:12px; color:#aaa;}

/* content */
.page_content {margin:auto; padding:5% 10px 0; height:100vh;}

.version_text {width:100%; text-align:center; font-size:4vw; font-weight:300; letter-spacing:1px; display:none; color:#aaa;}

.page_content svg {display:block; width:40%; margin:7vw auto 0; opacity:.8;}

@media (max-width:1650px) {
.desktop_text {display:block; margin:1vw auto;}
}

@media (max-width:1250px) {
.desktop_text {display:none;}
.laptop_text {display:block; margin:0.5vw auto;}
}

@media (max-width:800px) {
.laptop_text {display:none;}
.ipad_text {display:block; font-size:5vw; margin:5vw auto;}
.iphoneeight_text {display:none;}
.page_content svg {width:60%; margin:15vw auto 0;}
}

– – – – – – – – – –