Home Responsive Web Design (RWD) - Simple responsive design test page for your website

      :: Steps to follow:

   » copy and paste the HTML code below and save as a document (txt).

   » name/rename the file: responsivator.html

   » upload the file in the same folder where your index page is

   » type in your browser: www.YourWebsite.com/responsivator.html (replace YourWebsite.com with the URL of your website)

      It's simple as 1..2...3!

   *** You may also download the file, unzip it and upload onto your website in: RAR (responsivator.rar) or ZIP (responsivator.zip) format

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Responsive Design Testing</title>
    <style>
        body { margin: 20px; font-family: sans-serif; overflow-x: scroll; }
        .wrapper { width: 6000px; }
        .frame { float: left; }
        h2 { margin: 0 0 5px 0; }
        iframe { margin: 0 20px 20px 0; border: 1px solid #666; }
    </style>    
</head>
<body>
    <div class="wrapper">
        <div class="frame">
            <h2>320 &times; 480 <small>(mobile)</small></h2>
            <iframe src="./" sandbox="allow-same-origin allow-forms" seamless width="320" height="480"></iframe>
        </div>
        <div class="frame">
            <h2>480 &times; 640 <small>(small tablet)</small></h2>                   
            <iframe src="./" sandbox="allow-same-origin allow-forms" seamless width="480" height="640"></iframe>
        </div>                                                                                                                        
        <div class="frame">
            <h2>768 &times; 1024 <small>(tablet - portrait)</small></h2>                   
            <iframe src="./" sandbox="allow-same-origin allow-forms" seamless width="768" height="1024"></iframe>
        </div>
        <div class="frame">
            <h2>1024 &times; 768 <small>(tablet - landscape)</small></h2>
            <iframe src="./" sandbox="allow-same-origin allow-forms" seamless width="1024" height="768"></iframe>
        </div>
        <div class="frame">
            <h2>1200 &times; 800 <small>(desktop)</small></h2>
            <iframe src="./" sandbox="allow-same-origin allow-forms" seamless width="1200" height="800"></iframe>
        </div>
    </div>
</body>
</html>

 :: The most popular screen resolutions in the United States for 2012

(1st) 1366x768, 17.05% -- 15" to 17" laptops designed for HDTV

(2nd) 1024x768, 14.77% -- 17" desktop screen

(3rd) 1280x800, 13.08% -- 15.4" widescreen laptops

(4th) 1920x1080, 7.24% -- 23" to 27" desktop screen

(5th) 1440x900, 7.19% -- 19" to 21" desktop widescreen

(6th) 1280x1024, 5.91% -- 19" desktop screen

(7th) 1600x900, 5.91% -- 17.3" laptop screen

(8th) 320x480, 5.54% -- iPhones

(9th) 768x1024, 5.45% -- iPad

(10th) 1680x1050, 3.94% -- 20" to 22" desktop widescreen

Home ยป Back to Responsive Web Design (RWD)