Beispiel:Viewport-Emulator.html
Aus SELFHTML-Wiki
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Viewport-Emulator</title>
<script>
/**
* Liste der Auflösungen
* Index ist die Auflösung im Querformat, Value die Beschreibung
*/
var _resolutions = {
'480x320': 'Mobile',
'800x600': 'Small tablet',
'1024x600': 'Tablet 7″',
'1280x800': 'Tablet 10″',
'1024x768': 'iPad mini',
'2048x1536': 'iPad mini Retina',
'1024x768': 'iPad 2',
'2048x1536': 'iPad Air',
}
/**
* Index der Defaultauflösung
* Greift nur, wenn kein Cookie existiert.
*/
var _dRes = 3;
/**
* Default Ausrichtung
* landscape: Querformat
* portrait: Hochformat
* Greift nur, wenn kein Cookie existiert.
*/
var _defaultAlignment = 'landscape';
/**
* Seitenauswahl
* Erscheint in Selectbox
*/
var _pages = {
'Startseite': 'https://selfhtml.org',
'Blog': 'https://blog.selfhtml.org/',
'Forum': 'https://forum.de.selfhtml.org/',
}
/**
* Index der Startseite
*/
var _start = 0;
</script>
<style>
body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
text-align: center;
background-color: #AAA;
}
div {
border: 50px solid black;
margin: 20px auto 0;
border-radius: 50px;
}
iframe {
background-color: #fff;
}
::-webkit-scrollbar { /* gesamte Scrolleiste */
}
::-webkit-scrollbar-button { /* Pfeil-Buttons */
}
::-webkit-scrollbar-track { /* Bereich für den Schieberegler */
}
::-webkit-scrollbar-thumb { /* Schieberegler */
}
::-webkit-scrollbar-corner { /* Größenregler (bei TEXTAREA sichtbar) */
}
</style>
</head>
<body>
<button type="button" onClick="reloadFrame()">reload</button>
<select
name="pages"
onchange="loadURL(this.options[this.selectedIndex].value, this.selectedIndex)"
>
</select>
<select
name="resolution"
onchange="changeResolution(this.options[this.selectedIndex].value, this.selectedIndex)"
>
</select>
<button type="button" onClick="changeAlignment(false)">
</button>
<div>
<iframe src="" frameborder="0"></iframe>
</div>
<script>
if(document.cookie)
{
_cookie = document.cookie.split(';');
for(var _data = 0; _data < _cookie.length; _data++)
{
_cData = _cookie[_data];
_cData = _cData.trim();
_list = _cData.split('=');
if(_list[0] == 'dRes')
{
_dRes = _list[1];
}
if(_list[0] == 'alignment')
{
_dAlignment = _list[1];
}
if(_list[0] == 'start')
{
_start = _list[1];
}
}
}
var _div = document.getElementsByTagName('div')[0];
var _iframe = document.getElementsByTagName('iframe')[0];
var _alignment = document.getElementsByTagName('button')[1];
init();
function init()
{
/**
* Dropdown für Auflösungen aufbauen
*/
var _sel = document.getElementsByTagName('select')[1];
for(var _res in _resolutions)
{
_sel.options[_sel.options.length] = new Option(_resolutions[_res] + ' (' + _res + ')', _res);
}
/**
* Defaultauflösung einstellen
*/
_sel.selectedIndex = _dRes;
/**
* Auflösung ändern
*/
changeResolution(_sel.options[_dRes].value, _dRes);
/**
* Ausrichtungsbutton beschriften
*/
if(typeof _dAlignment == 'undefined')
_alignment.innerHTML = _defaultAlignment;
else
_alignment.innerHTML = _dAlignment;
changeAlignment(true);
/**
* Dropdown für URLs aufbauen
*/
var _sel = document.getElementsByTagName('select')[0];
for(var _page in _pages)
{
_sel.options[_sel.options.length] = new Option(_page, _pages[_page]);
}
/**
* Defaultseite einstellen
*/
_sel.selectedIndex = _start;
/**
* URL laden
*/
loadURL(_sel.options[_start].value, _start);
}
function changeResolution(_res, _index)
{
document.cookie = 'dRes=' + _index;
var _res = _res.split('x');
_iframe.width = _res[0];
_iframe.height = _res[1];
_div.style.width = parseInt(_res[0]) + 'px';
_div.style.height = parseInt(_res[1]) + 'px';
}
function changeAlignment(_init)
{
var _sel = document.getElementsByTagName('select')[1];
var _res = _sel.options[_sel.selectedIndex].value;
document.cookie = 'alignment=' + _alignment.innerHTML;
if(_alignment.innerHTML == 'landscape')
{
_alignment.innerHTML = 'portrait';
}
else if(_alignment.innerHTML == 'portrait')
{
_alignment.innerHTML = 'landscape';
_res = _res.split('x');
_res = _res[1] + 'x' + _res[0];
}
changeResolution(_res, _sel.selectedIndex);
}
function reloadFrame()
{
var _sel = document.getElementsByTagName('select')[0];
/**
* URL laden
*/
loadURL(_sel.options[_sel.selectedIndex].value, _sel.selectedIndex);
}
function loadURL(_url, _index)
{
document.cookie = 'start=' + _index;
_iframe.src = _url;
}
</script>
</body>
</html>
