Build Your Own Responsive Tester Page

Today with all the different devices we can use on the internet it is very important that your website is responsive and can be viewed in any browser on any device. The different devices we can use are all quite different with different screen sizes, you can use your mobile phone, tablet, laptop, desktop or even a TV. It is important to be able to design websites that can be viewed in all these different browser sizes.

The problem we have is that to design for these different browser sizes you need to be able to test in these different browsers and devices. You have a few options, you can either buy all these devices, you can resize your browser to fit the different sizes, you can use web developer tools to select the exact sizes or you can use a tool to resize the web page.

In this tutorial, we're going to create a small tool to display a web page in a certain size.

Device Sizes

Below are the most common devices sizes you'll need to make sure your website caters for these sizes.

• Mobile Phone (320 x 480)
• Mobile Phone Landscape (480 x 320)
• Small Tablet (600 x 800)
• Small Tablet Landscape (800 x 600)
• Tablet (768 x 1024)
• Tablet Landscape (1024 x 768)

Build The App

In this tutorial, we're going to create a small app to test a web page in different sizes depending on the device type. There are default sizes for the above different devices or you can enter your own dimensions to test the web page on any dimensions you want.

HTML Form

First, we're going to create a HTML form which has inputs for the device width, height and the URL for the web page to test.

<form method="post">
        <p><label for="">Default Size:</label> <select id="size" name="size">
                <option value="">Select A Size</option>
                <option data-width="320" data-height="480">Mobile</option>
                <option data-width="480" data-height="320">Mobile Landscape</option>
                <option data-width="600" data-height="800">Small Tablet</option>
                <option data-width="800" data-height="600">Small Tablet Landscape</option>
                <option data-width="768" data-height="1024">Tablet</option>
                <option data-width="1024" data-height="768">Tablet Landscape</option>
                <option data-width="320" data-height="568">iPhone5S</option>
                <option data-width="360" data-height="640">Galaxy S5 Mini</option>
                <option data-width="360" data-height="640">Galaxy S5</option>
                <option data-width="360" data-height="640">Galaxy Note 3</option>
                <option data-width="375" data-height="667">iPhone 6</option>
                <option data-width="384" data-height="640">Google Nexus 4</option>
                <option data-width="414" data-height="736">iPhone 6 Plus</option>
                <option data-width="600" data-height="960">Kindle Fire HDX 7</option>
                <option data-width="768" data-height="1024">iPad Mini 2</option>
                <option data-width="768" data-height="1024">iPad Air</option>
                <option data-width="800" data-height="1280">Galaxy Tab 4</option>
            </select></p>
        <p>
            <label for="device-width">Width:</label> <input type="text" name="device-width" id="device-width" placeholder="Device width" value="<?php echo $width; ?>" />
            <label for="device-height">Height:</label> <input type="text" name="device-height" id="device-height" placeholder="Device height" value="<?php echo $height; ?>" />
        </p>

        <p><label for="url">URL:</label> <input type="url" name="url" id="url" placeholder="Enter the url to test" value="<?php echo $url; ?>" /></p>

        <p><label></label><input type="submit" name="test-site" value="Test Site" /></p>
    </form>

You'll notice that the select options have attributes for data-width and data-height this is so we can use Javascript to auto populate the device width and height inputs.

Processing The Form

On the submit of the form we need to process the dimensions of the iframe to fit the input from the user.

For this, we need to do some validation to make sure that the user an integer as the width and height for the iframe. Next, we check that the URL the user entered is a valid URL.

$width = 320;
$height = 480;
$url = 'https://paulund.co.uk';

if(!empty($_POST['device-width']))
{
    $width = intval(stripslashes($_POST['device-width']));
}
if(!empty($_POST['device-height']))
{
    $height = intval(stripslashes($_POST['device-height']));
}
if(!empty($_POST['url']))
{
    $url = filter_var(stripslashes($_POST['url']), FILTER_VALIDATE_URL);
}

When we have the dimensions of the iframe we can change the size using CSS to style the frame.

<style>
        #iframe-site-tester
        {
            height: <?php echo $height; ?>px;
            width: <?php echo $width; ?>px;
        }
</style>

With the dimensions and the URL set we can simply display the web page inside the iframe.

<div class="site-tester">
    <p id="testing-dimension">(<?php echo $width; ?>px x <?php echo $height; ?>px)</p>
    <iframe src="<?php echo $url; ?>" frameborder="0" id="iframe-site-tester"></iframe>
</div>

View the demo page to test any web page.

Demo