Custom Device Display Emulators
Some browsers have a wonderful screen display emulator for mobile devices. Mobile screen emulators can be found on the internet.
But they generally display one device at a time and with the display size rigid, not adjustable.
To nullify those two restrictions, I made my own. And I thought maybe you could use it, too.
-
Put as many independent screen emulators as you want on a web page.
-
Each emulator can be custom-sized to your requirements.
-
Each emulator can emulate the display of a separate computer or device
The tool, included with this article, can emulate anything you know the screen size and user-agent string of. It can save searching all over the internet for an emulator for a specific device or operating system.
(Screen sizes generally can be found where the device is sold. User-agent strings can be found at the IP and UA page or at the website where the device is sold. If still no joy, you may find it listed at the useragentstring.com site.)
The tool is especially convenient for website developers who frequently check their designs against a list of devices. Quick checks are more convenient with this system than they are with each emulator at a different location.
Implementation
The tool is implemented in two steps.
-
A PHP script is put on your server.
-
The web page with the emulators is created.
Here is the PHP script to put on your server. No customization is required. Upload it as emulator.php or other .php file name and, important for the next step, make a note of it's URL.
<?php
/*
Device Emulator
Version 1.0
January 13, 2019
Will Bontrager Software LLC
https://www.willmaster.com/
*/
mb_internal_encoding('UTF-8');
date_default_timezone_set('UTC');
if( empty($_GET['url']) ) { $_GET['url'] = 'http://example.com'; }
if( empty($_GET['ua']) ) { $_GET['ua'] = $_SERVER['HTTP_USER_AGENT']; }
$content = '';
$info = GetWebPage($_GET['url'],$content);
if( $info['http_code'] == 200 ) { echo $content; }
else { PresentErrorResponse($info); }
exit;
function GetWebPage($url,&$content)
{
// See http://php.net/manual/en/function.curl-setopt.php for explanations of the various options.
$options = array(
CURLOPT_RETURNTRANSFER => true,
CURLOPT_HEADER => false,
CURLOPT_CONNECTTIMEOUT => 120,
CURLOPT_TIMEOUT => 120,
CURLOPT_FOLLOWLOCATION => true,
CURLOPT_MAXREDIRS => 10,
CURLOPT_AUTOREFERER => true,
CURLOPT_USERAGENT => $_GET['ua'],
CURLOPT_REFERER => (empty($_SERVER['HTTPS'])?'http://':'https://').$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'],
CURLOPT_VERBOSE => false,
);
$info = array();
$ch = curl_init($url);
curl_setopt_array($ch,$options);
$content = curl_exec($ch);
$err = curl_errno($ch);
$errmsg = curl_error($ch) ;
$info = curl_getinfo($ch);
curl_close($ch);
$info['errno'] = $err;
$info['errmsg'] = $errmsg;
return $info;
} # function GetWebPage()
function PresentErrorResponse($info)
{
echo <<<STARTPAGE
<h4>Non-200 Response</h4>
<p>This is all the information I have available.</p>
<table border="1" cellpadding="7" cellspacing="0" style="border-collapse:collapse; border:1px solid #ccc;">
<tr><td>Requested URL</td><td>{$_GET['url']}</td></tr>
STARTPAGE;
foreach( $info as $k => $v )
{
if( $k == 'url' ) { $k = 'Final URL'; }
if( is_array($v) ) { $v = '<pre>'.print_r($v,true).'</pre>'; }
echo "<tr><td>$k</td><td>$v</td></tr>";
}
echo '</table>';
} # function PresentErrorResponse()
?>
With the URL of emulator.php at hand, we can build the emulators.
But first, below is what the emulators look like.
The values for this particular emulator have been specified for an iPhone 7. You may change the values as you please.
When you specify a URL and tap the "Get Page" button, two things happen:
-
The emulator viewing area size adjusts for the size specified.
-
The web page at the URL displays in the viewing area (or an error message if the emulator had a problem with the URL).
Here is the example emulator with the form fields pre-filled in for the iPhone 7.
Width: Height:
UA:
URL:
If you change the width or height of the example emulator, you can specify inches, centimeters, pixels, picas, or any other standard CSS measurement. Type in whatever the CSS style needs to determine the width or height and you're good to go.
(The other fields of the example emulator can also be changed.)
Now, let's make the emulator page.
The code for each emulator on the page looks like this.
<!-- Emulator #1 --> <div style="float:left; margin-right:.25in; margin-bottom:.5in;"> <p><span class="nowrap">Width: <input type="text" id="width1" value="" style="width:5em;"></span> <span class="nowrap">Height: <input type="text" id="height1" value="" style="width:5em;"></span></p> <p>UA:<br><input type="text" id="ua1" value="" style="width:100%;"></p> <p>URL:<br><input type="text" id="url1" value="" style="width:100%;"></p> <p style="margin-top:.5em;"><input type="button" value="Get Page" onclick="GetPage('1')" style="width:100%;"></p> <iframe id="emulator1" src="" style="width:300px; height:500px; border:1px solid #999; padding:0; border-radius:5px;"></iframe> </div>
Each emulator is the same except for an identical number in six different places of the source code. The number keeps the emulators separated from each other when the information is processed.
In the above example, the number is the digit 1. You'll see it in the code in six different places, each colored blue.
For subsequent emulators, the 1 is changed to either a digit or an alphabetical letter that is different than any other emulator on the page.
The form text fields may be pre-filled with values for devices that you check frequently. (For an illustration, see the example further above. It is pre-filled with information for emulating the iPhone 7.)
Emulator Web Page Source Code
Below is the complete emulator web page source code. It has two emulators to illustrate how it's done. Add as many emulators as you like.
There is one place to customize that must be done. And additional emulators may be added. Customization is addressed below the web page source code.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Device Display Emulation Page</title>
<style type="text/css">
* { box-sizing:border-box; }
html, body { font-size:100%; font-family:sans-serif; }
.nowrap { white-space:nowrap; }
.bold { font-weight:bold; }
.italic { font-style:italic; }
h1 { margin:0; }
h3 { margin-top:0; }
p { margin-top:.25em; margin-bottom:.15em; }
input { font-size:1em; }
input[type="text"] { border:1px solid #ccc; padding:3pt; border-radius:3pt; }
</style>
<script>
var URLofEmulator = 'https://example.com/emulator.php';
function GetPage(n)
{
var params = new Array();
var d = document.getElementById("emulator"+n);
d.style.width = document.getElementById("width"+n).value;
d.style.height = document.getElementById("height"+n).value;
params.push("ua="+encodeURIComponent(document.getElementById("ua"+n).value));
params.push("url="+encodeURIComponent(document.getElementById("url"+n).value));
d.src = URLofEmulator + "?" + params.join("&");
}
</script>
</head>
<body>
<h1>Device Display Emulator</h1>
<h3>(Use CSS Values for Width and Height)</h3>
<!-- Emulator #1 -->
<div style="float:left; margin-right:.25in; margin-bottom:.5in;">
<p><span class="nowrap">Width: <input type="text" id="width1" value="" style="width:5em;"></span>
<span class="nowrap">Height: <input type="text" id="height1" value="" style="width:5em;"></span></p>
<p>UA:<br><input type="text" id="ua1" value="" style="width:100%;"></p>
<p>URL:<br><input type="text" id="url1" value="" style="width:100%;"></p>
<p style="margin-top:.5em;"><input type="button" value="Get Page" onclick="GetPage('1')" style="width:100%;"></p>
<iframe id="emulator1" src="" style="width:300px; height:500px; border:1px solid #999; padding:0; border-radius:5px;"></iframe>
</div>
<!-- Emulator #2 -->
<div style="float:left; margin-right:.25in; margin-bottom:.5in;">
<p><span class="nowrap">Width: <input type="text" id="width2" value="" style="width:5em;"></span>
<span class="nowrap">Height: <input type="text" id="height2" value="" style="width:5em;"></span></p>
<p>UA:<br><input type="text" id="ua2" value="" style="width:100%;"></p>
<p>URL:<br><input type="text" id="url2" value="" style="width:100%;"></p>
<p style="margin-top:.5em;"><input type="button" value="Get Page" onclick="GetPage('2')" style="width:100%;"></p>
<iframe id="emulator2" src="" style="width:300px; height:500px; border:1px solid #999; padding:0; border-radius:5px;"></iframe>
</div>
<p style="clear:left; margin-bottom:.5in;">Provided by <a href="https://www.willmaster.com/">Will Bontrager Software LLC</a></p>
</body>
</html>
Customization:
This customization must be done:
At line 20 of the above source code, you'll see this code:
var URLofEmulator = 'https://example.com/emulator.php';
Change https://example.com/emulator.php to the URL of the emulator.php script you uploaded to your domain at the first implementation step.
Optional customizations:
Form fields above the emulators may be pre-filled.
More emulators may be added to the page.
When ready to add another emulator, copy the code from one of the existing emulators and paste it into the page. Then change the six instances in the duplicate source code that identify the new emulator.
Let's suppose you duplicated emulator #2 and will identify the new one as emulator #3. In that case, change all six instances of 2 in the new emulator source code to 3.
The new emulator doesn't have to be identified as #3. It can be any other number or an alphabetical letter or a series of numbers and/or letters that aren't used as identification in any other emulator on the page. Whatever you decide, change the six instances of 2 accordingly.
You now have a page of custom device screen emulators. Add as many as you want to see together on one page.
(This article first appeared with an issue of the Possibilities newsletter.)
Will Bontrager
