I have come up with a javascript kludge that allows iphones to scale correctly in an iframe. However it only works if they run directly in Safari and not from an icon they added to their home screen. And it doesn't solve the local storage issue mentioned above. But it looks something like this:
Code: Select all
<!DOCTYPE html>
<html>
<head>
<title>My Poker Site</title>
<meta charset="UTF-8">
<style type="text/css">
body, html { height: 100%; width: 100%; margin: 0; padding: 0; overflow: hidden; }
#pokerframe { width: 0; min-width: 100%; max-width: 100%; height: 0; min-height: 100%; max-height: 100%; border: 0;}
</style>
<script>
window.addEventListener('resize', function(){
var e = document.getElementById("pokerframe");
e.style.minWidth = window.innerWidth + "px";
e.style.width = window.innerWidth + "px";
e.style.minHeight = window.innerHeight + "px";
e.style.height = window.innerHeight + "px";
window.scrollTo(0,0);
});
</script>
</head>
<body>
<iframe id="pokerframe" src="http://127.0.0.1:8087" allowfullscreen>
<p>Your browser does not support iframes</p>
</iframe>
</body>
</html>