Skip to content

Instantly share code, notes, and snippets.

@Pierstoval
Last active August 18, 2017 11:20
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save Pierstoval/709e705c81ba10c1631310e57f667d34 to your computer and use it in GitHub Desktop.
See the size of your website on most famous devices
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment