iPhones and iframes

For discussion of the Poker Mavens server module and other administration topics
Post Reply
Kent Briggs
Site Admin
Posts: 5878
Joined: Wed Mar 19, 2008 8:47 pm

iPhones and iframes

Post by Kent Briggs »

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:

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>
By the way, Android Chrome has none of these problems.
social
Posts: 211
Joined: Fri Nov 20, 2009 12:23 am

Re: iPhones and iframes

Post by social »

Thanks for your efforts, Kent.
Post Reply