Pierstoval
7/6/2017 - 9:02 AM

See the size of your website on most famous devices

See the size of your website on most famous devices

devices.php
content_copyfile_download
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        * { margin: 0; padding: 0; box-sizing: border-box; }
        iframe {
            overflow: hidden;
            border: solid 1px black;
            display: inline-block;
        }
    </style>
</head>
<body>
<?php
$url = 'http://www.google.com/';

// Get most famous sizes here:
// https://www.w3counter.com/globalstats.php

// Width, height
$sizes = [
    // Landscape
    ['640','360'],
    ['1366','768'],
    ['667','375'],
    ['1024','768'],
    ['1920','1080'],
    ['568','320'],
    ['534','320'],
    ['570','320'],
    ['1280','800'],
    ['1600','900'],
    ['360', '640'],

    // Portrait
    ['768', '1366'],
    ['375', '667'],
    ['768', '1024'],
    ['1080', '1920'],
    ['320', '568'],
    ['320', '534'],
    ['320', '570'],
    ['800', '1280'],
    ['900', '1600'],
];

foreach ($sizes as list($width, $height)) {
    ?>
    <div style="position: relative;">
        <span style="padding: 2px 5px; font-size: 12px; position: absolute; top: 0; left: 0; background: rgba(0,0,0,0.5);color:white;"> <?php echo $width, 'x', $height; ?></span>
        <iframe src="<?php echo $url; ?>" frameborder="0" scrolling="no" style="width: <?php echo $width; ?>px; height: <?php echo $height; ?>px;"></iframe>
    </div>
    <?php
}
?>
</body>
</html>