Gratis iPhone simulator/emulator til websiden din!
Link til simulator
Oppskriften her dekker følgende:
– iframe link til call.html på den siden du vil at simulatoren skal vise med lite innhold
– css kode for og skjule sti/iframe til iphone simulator/emulator på mobil
– call.html som sender skjema url videre til egen side for simulator.
– index.php selve simulatoren som har egen side.
– Nedlasting av hele koden.
– Orginal kode.
Nederst i artikkelen ligger hele mappen for nedlasting som inneholder alt du trenger.
Lagre mappen på ditt webhotell. I wordpress feks wp-content mappen eller uploads.
IFRAME:
Vi begynner med iframe linken som ligger på forsiden av http://itos.no idag.
Plasseres på forsiden av hjemmesiden din.
Du kan også lage en side som går direkte til simulator og ikkje ha noe på forsiden.
Evt. kan du lage en vanlig link direkte til simulatorens side.
<iframe id=»id_hidden» src=»din sti til/call.html» height=»50″ width=»100%» scrolling=»no» seamless></iframe>
CSS:
I iframe koden ligger det en id=hidden den er referanse til css koden for og hindre at den viser på mobiler.
limes inn i css for din webside. Denne koden sier at skjermer mindre enn 1024px ikkje skal vise simulatoren
@media only screen and (max-device-width : 1024px) {
#id_hidden { display:none; }
}
CALL.HTML:
I head delen av html her har eg lagt inn google font for tekst i liten visning på forsiden.
Resten skal være selvforklarende og de som kan html og css kan sikkert gjøre dette flottere en det eg har gjort 🙂
<html>
<head>
<link href=’http://fonts.googleapis.com/css?family=Kaushan+Script’ rel=’stylesheet’ type=’text/css’>
<script type=»text/javascript»>
WebFontConfig = {
google: { families: [ ‘Kaushan+Script::latin’ ] }
};
(function() {
var wf = document.createElement(‘script’);
wf.src = (‘https:’ == document.location.protocol ? ‘https’ : ‘http’) +
‘://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js’;
wf.type = ‘text/javascript’;
wf.async = ‘true’;
var s = document.getElementsByTagName(‘script’)[0];
s.parentNode.insertBefore(wf, s);
})(); </script>
<style>
table,td,th
{
border:none;
}
table
{
width:100%;
}
th
{
height:50px;
}
h1 {text-align:left; font-family: ‘Kaushan Script’, cursive; font-weight: 400;}
p.main {text-align:left; font-family: ‘Antic Slab’, serif;}
</style>
</head>
<table>
<tr>
<td>
<h1>Er din nettside mobil tilpasset?</h1>
</td>
<td>
<p class=»main»>
<form action=»sti til websiden din der du legger/device/index.php» method=»get» target=»_blank»>
(prøv her feks vg.no) http://<input type=»text» name=»url»><input type=»submit» onClick=»javascript:window.opener.location.href=’sti til websiden din der du legger/device/index.php’;» value=»OK!»></p>
</td>
</tr>
</body>
</form>
</body>
</html>
INDEX.PHP:
Denne er forsovet rett fram og evt endringer er tekst og bilder som blir hentet i images mappen.
Navnet på siden kan også endres om ønskelig.
<html>
<head>
<title>ITOS iPhone simulator</title>
<script src=»js/jquery-1.10.2.min.js»></script>
<script src=»js/script.js»></script>
<style>
.content{
font-family:verdana, arial, tahoma;
font-size:12px;
background: url(images/wheel.jpg);
background-repeat:no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
background-position:center;
}
.iPhone{
margin: 0px 8px 0px 0px;
padding: 88px 0px 0px 0px;
width: 502px;
height: 780px;
background: url(images/iPhone.png) no-repeat top left;
clear:both;
}
.iPhone-inside{
width: 229px;
margin-top: -14px;
margin-left: 47px;
background: #666;
height: 352px;
overflow: hidden;
}
#iframe{
-moz-transform: scale(0.678);
-moz-transform-origin: 0 0;
-o-transform: scale(0.678);
-o-transform-origin: 0 0;
-webkit-transform: scale(0.678);
-webkit-transform-origin: 0 0;
}
#loader{
position: absolute;
width: 190px;
text-align: center;
top: 180px;
border: 0px solid #666;
background: transparent;
padding: 15px;
left: 55px;
z-index: 2;
}
.tips{color:#fff;}
.fade{
height: 352px;
width: 219px;
background: #666;
position: absolute;
z-index: 1;
opacity: 0.25;
}
</style>
</head>
</html>
<body class=»content»>
<form method=»get» action=»» onsubmit=»javascript: return show_loader()»>
<span class=»tips»> (skriv her feks vg.no) http://</span>
<input type=»hidden» name=»agent» value=»1″ />
<input type=»text» name=»url»>
<input type=»submit» value=»OK!»>
</form>
<?php
ERROR_REPORTING(E_ALL);
$url = «http://».$_SERVER[‘SERVER_NAME’].$_SERVER[‘REQUEST_URI’];
$tmp = explode(«?»,$url);
$url = $tmp[0];
define(«PROXY_URL», $url);
define(«USER_AGENT_IPHONE_IOS5» , «Mozilla/5.0 (iPhone; CPU iPhone OS 5_0 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1 Mobile/9A334 Safari/7534.48.3»);
define(«USER_AGENT_IPAD_IOS5» , «Mozilla/5.0 (iPad; CPU OS 5_0 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1 Mobile/9A334 Safari/7534.48.3»);
define(«USER_AGENT_NEXUS_7» , «Mozilla/5.0 (Linux; Android 4.1.1; Nexus 7 Build/JRO03D) AppleWebKit/535.19 (KHTML, like Gecko) Chrome/18.0.1025.166 Safari/535.19»);
define(«USER_AGENT_GALAXY_NEXUS» , «Mozilla/5.0 (Linux; U; Android 4.0.2; en-us; Galaxy Nexus Build/ICL53F) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30»);
define(«USER_AGENT_BLACK_BERRY10», «Mozilla/5.0 (BB10; Touch) AppleWebKit/537.1+ (KHTML, like Gecko) Version/10.0.0.1337 Mobile Safari/537.1+»);
if (isset($_GET[‘url’]))
{
if(!(substr($_GET[‘url’],0,7)==»http://» || substr($_GET[‘url’],0,8)==»https://»)) {
$_GET[‘url’] = «http://».$_GET[‘url’];
}
$url = htmlspecialchars($_GET[‘url’], ENT_COMPAT, ‘UTF-8’);
if (!isset($_GET[‘agent’]))
{
$_GET[‘agent’] = 1;
}
switch($_GET[‘agent’])
{
case 1:
$user_agent = USER_AGENT_IPHONE_IOS5;
break;
case 2:
$user_agent = USER_AGENT_IPAD_IOS5;
break;
case 3:
$user_agent = USER_AGENT_NEXUS_7;
break;
case 4:
$user_agent = USER_AGENT_GALAXY_NEXUS;
break;
case 5:
$user_agent = USER_AGENT_BLACK_BERRY10;
break;
default:
$user_agent = USER_AGENT_IPAD_IOS5;
break;
}
$proxy = PROXY_URL .’?agent=’. $_GET[‘agent’];
$ch = curl_init();
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
curl_setopt($ch, CURLOPT_VERBOSE, true);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_USERAGENT, $user_agent);
curl_setopt($ch, CURLOPT_URL, htmlspecialchars_decode($url));
$result=curl_exec($ch);
curl_close ($ch);
$url = $_GET[‘url’];
if(strstr($result,’The document has moved’)){
$a_url = preg_match(‘/<a href=»(.+)»>/’, strtolower($result), $match);
$url = html_entity_decode(urldecode($match[1]));
}
}
?>
<div class=»iPhone»>
<div class=»iPhone-inside»>
<?php if(isset($_GET[‘url’]) && $url!=»»){ ?><div id=»loader»><img src=»images/loading.gif»></div><?php } ?>
<div class=»fade» id=»fade»></div>
<?php if(isset($_GET[‘url’]) && $url!=»»){ ?><iframe onload=’parent.hide_loader()’ id=»iframe» width=»340″ height=»520″ src=»<?php echo $url; ?>» frameborder=»0″></iframe><?php } ?>
</div>
</body>
NEDLASTING:
Last nede hele koden ved og trykke på linken til mappen: device
ORG.KODE:
Hjemmesiden til orginal kode: http://php-drops.blogspot.no