CSS

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 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

bbc-iframe

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

Back to top

View Demo

Members Download

Comments

  1. sunpietro says:

    I don't see any point in doing this. You can always open web developer tools while browsing the page and check the page. On Firefox you can do it by pushing Cmd/Ctrl + Alt + M and then you get the responsive view mode where you can define the dimensions and turn on touch events and make a screenshot of whole page.

    1. Andreas Kullander says:

      It could be a nice thing to send to clients with a little styling. Asking clients to resize browser or using DevTools is just not happening...

      1. Paul says:

        Yep, thats a good idea. Maybe could change the POST to a GET to make it easier for clients.

  2. Sandesh says:

    Hi Paul, it's a very nice tool. Yes, accepting parameters through GET method would be great. This tool would be very useful for theme developers specially for themeforest authors as it has a huge base of designers so it would be useful for them to show their themes in different screen resolutions.

Leave a Reply

Your email address will not be published. Required fields are marked *