Mobile Response Testing Tool

Share via

This tool allows you to check the ‘responsive’ behavior of your website by displaying the site inside frames of differing sizes on a single page, creating a side-by side comparison of approximately how the site will look on various devices. Pages inside each frame can be scrolled and clicked for testing.

If you design or manage websites for others, this tool may also be handy for demonstrating nuances of responsive behavior to your clients, especially if they rarely look at their own site on a mobile device (or don’t even own one). Also easier than trying to teach them how to use Firefox’s custom user agent (especially if they don’t use Firefox).

Mobil Response Testing Tool

Simply click on the above link, type or copy and paste the url you want to test, and press enter.

A custom link to invoke the tool for a given url can be copied from the browser address bar after a url has been entered at the above link.

Notes

The tool is meant to be used on desktop or laptop computers with displays at least 1024 pixels wide (preferably >1600). It may take a few seconds to load, because the tool loads nine separate copies of the test page inside different <iframe> tags.

The physical size (in inches or cm) of the device frames on the test page will likely be larger than the physical size of the mobile device each frame is mimicking, depending on the pixel density of the device (i.e., 272 x 340 pixels on an iWatch is physically smaller than 272 x 340 pixels on most laptop or desktop displays).

If you are logged into your WordPress (or other CMS based) website when you run the tool, the dashboard bar will appear in all frames. Logout (or use a browser that is not logged in) to see how your site will look to regular visitors.

If you scroll down in a frame then click a link, the new page that opens in the frame may appear to be scrolled down. [tmi-alert]: This is because the vertical scrollbars are outside the device frame and scroll the overflow of a div layer in which there is an embedded iframe 1000% longer than the div layer. Because iframes are not allowed to overflow their container (for good reason), I made their containers long enough to hold ten times the device height of the given div layer frame, if the page is that long, in that frame (if the page is longer you won’t be able to scroll to the end of the page). All of this because I couldn’t find any way (css or attribute) to suppress the horizontal scrollbar that appears if one doesn’t include scrolling=”no” in the iframe tag, which apparently turns off both scrollbars (overflow-x and y css don’t seem work on iframe scrollbars, probably because overflow:visible is prohibited for securities sake…)

Code

The code at the above link displays five common devices sizes (from iWatch to laptop) in nine frames (four of the sizes are also shown rotated).

Here’s the code if anyone wants to put the tool on their own site, or to setup different device sizes.

<?php 
    if (isset($_POST['url'])) {
        $test_page = urldecode($_POST['url']);
        header("Location: /mobile/?url=$test_page"); //The url of the page showing multiple views may be bookmarked or forwarded to open the too for a given page without going through the form
        die();
    }
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Mobile response test</title>

<style type="text/css">
    p, form {
    color:white;
    margin-left:23px;
    }
    .test-iframe {
        height: 1000%;
        width: 100%;
    }
    .test-iframe-div {
        border: 1px solid grey;
        display:block;
        margin: 5px 23px 5px 5px;
        overflow-x: hidden;
        overflow-y: scroll;
        padding-right: 11px;
    }
    .mobile-test {
        display:inline-flex;
    }
    input {
        margin-top:7px;
    }
</style>

</head>

<body style="background-color:black;">
<?php
    if (isset($_GET['url'])) {
        $test_page = urldecode($_GET['url']);
        if (strpos($test_page, 'http') !== 0) $test_page = 'http://' . $test_page;
?>
<!-- Add ~20 px to width to allow for div frame scrollbar, padding etc, minus about 45 px for android triangle-circle-square in landscape view -->
<p>Small iWatch:  272 x 340</p>
<div class="mobile-test">
    <div style="height:340px;width:292px;" class="test-iframe-div"><iframe src="<?php echo $test_page?>" class="test-iframe" scrolling="no"></iframe></div>
    <div style="height:272px;width:360px;" class="test-iframe-div"><iframe src="<?php echo $test_page?>" class="test-iframe" scrolling="no"></iframe></div>
</div>

<p>Old phone:  320 x 480</p>
<div class="mobile-test">
   <div style="height:480px;width:340px;" class="test-iframe-div"><iframe src="<?php echo $test_page?>" class="test-iframe" scrolling="no"></iframe></div>
    <div style="height:320px;width:500px;" class="test-iframe-div"><iframe src="<?php echo $test_page?>" class="test-iframe" scrolling="no"></iframe></div>
</div>

 <p>Android phone:  360 x 640 (adjusted to omit space used by triangle-circle-square in lanscape view)</p>
<div class="mobile-test">
   <div style="height:640px;width:380px;" class="test-iframe-div"><iframe src="<?php echo $test_page?>" class="test-iframe" scrolling="no"></iframe></div>
    <div style="height:360px;width:615px;" class="test-iframe-div"><iframe src="<?php echo $test_page?>" class="test-iframe" scrolling="no"></iframe></div>
</div>

<p>Tablet:  1024 x 768</p>
<div class="mobile-test">
    <div style="height:1024px;width:788px;" class="test-iframe-div"><iframe src="<?php echo $test_page?>" class="test-iframe" scrolling="no"></iframe></div>
    <div style="height:768px;width:1044px;" class="test-iframe-div"><iframe src="<?php echo $test_page?>" class="test-iframe" scrolling="no"></iframe></div>
</div>

<p>Laptop:  1440 x 900</p>
<div class="mobile-test">
    <div style="height:900px;width:1460px;" class="test-iframe-div"><iframe src="<?php echo $test_page?>" class="test-iframe" scrolling="no"></iframe></div>
</div>

<?php 
    } else {
?>
<p><strong>Check how your web page looks on various size devices</strong></p>
<form action="/mobile/" method="post" name="form1" id="form1" >
      <label>Copy and paste url, then press 'enter'</label><br/ >
        <input name="url" type="text" id="url" size="50" />
    </form>
<?php 
    }
?>

</body>
</html>