iPhone Web Dev

Sep 14, 2007 by Andre

I chose jQuery as my JavaScript library, and I opted not to use iUI. The iUI choice was driven primarily by the specifics of the application, and the kind of user interaction that made sense for it.

Here is the most basic JS/CSS to get the iPhone orientation detection going:

<head>
<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
<%=javascript_include_tag 'jquery' %>
<script language="JavaScript">
  window.onload=function(){
    setTimeout(ip.updateLayout, 0);
    setInterval(ip.updateLayout, 100);
    setTimeout(ip.hideURLbar,100);
  };

  ip={
    pageWidth:null,
    updateLayout:function(){
      var width=window.innerWidth;
      if (width != ip.pageWidth) {
        ip.pageWidth = width;
        var orientation = width == 320 ? "profile" : "landscape";
        // fire transition events
        orientation == 'profile' ? ip.transitionToProfile() : ip.transitionToLandscape();
        $(document.body).attr('class', orientation);
        setTimeout(function(){
            window.scrollTo(0, 1);
        }, 100);
      }
    },
    transitionToProfile: function(){
    },
    transitionToLandscape: function(){
    },  
    hideURLbar:function(){
      window.scrollTo(0, 1);
    }
  };   
</script>
<style>
  body {
    margin: 0;
    padding: 0;
    font-family: Helvetica;
    color: #FFFFFF;
    -webkit-user-select: none;
    cursor: default;
    -webkit-text-size-adjust: none;
  }

  body.profile { 
    height:416px;
    background-color:red;
  }

  body.landscape { 
    height:270px;
    background-color:green;
  }
</style>
</head>

Post a comment

 
This is so filters can reject the spam-bots. Thanks!