iPhones and iframes
Posted: Fri Sep 14, 2018 1:24 pm
If you are linking to your poker site from your own web site, I highly recommend that you do so with a direct link rather than embed the site inside an iframe. At least for your mobile device users. The main reason is that iPhones do not play well with iframes. iframes do not scale correctly on iPhones when you rotate between portrait and landscape orientation. Also, iPhones do not support local storage on cross-domain links. Which means the client will not remember the player's name and password (or any of their other local settings) between sessions. Even if your poker server and web server are on the same domain, the difference in port numbers alone classifies the link as cross-domain.
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:
By the way, Android Chrome has none of these problems.
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>