Skip to content

Instantly share code, notes, and snippets.

@Pierstoval

Pierstoval/devices.php

Last active August 18, 2017 11:20
Download ZIP

Revisions

  1. Pierstoval renamed this gist Aug 18, 2017. 1 changed file with 0 additions and 0 deletions.
    0 devices.html → devices.php
    View file
    File renamed without changes.
  2. Pierstoval created this gist Jul 6, 2017.
    59 changes: 59 additions & 0 deletions devices.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,59 @@
    <!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>