iPhone Android Website Example
Did you ever just need a simple explination and coding example of how an iPhone or Android website works?
Code Example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
<link rel="apple-touch-icon" href="http://www.combsconsulting.com/iphone/images/favicon.png"/>
<head>
<link rel="stylesheet" href="css/mobile.css" type="text/css" media="screen and (min-device-width: 320px)" />
<title>Jenny Craig Dining Out for iPhone</title>
<script src="js/conceal.js" type="text/javascript"></script>
</head>
<body>
<div class="header"></div>
</body>
</html>
Explanation:
The nuts and bolts of "<h1><font>Jenny Craig Dining Out for iPhone</font></h1>" and "<script src="js/conceal.js" type="text/javascript"></script>" work as follows: The script says "window.onload = function()" (When The Page Loads) "setTimeout(function(){window.scrollTo(0, 1);}, 100)" (I want you to wait a 10th of a second then scroll the 1st tag (the h1 tag) above the browser).
The nuts and bolts of of making the iPhone iPod render to your css specs are two tags you must do. If you don't the iPhone iPod assumes you are not coding for them and they zoom way out. "<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>" tells the iPhone iPod that you are writing the page for a width of 320 pixels, the iPhone’s iPod’s width while holding it vertically. Next the "media="screen and (min-device-width: 320px)"" in the style sheet link is vital, it tells the iPhone iPod that indeed you want it to render with a minimum width of 320 pixes, minimum because you can turn the iPhone iPod horizontally.
The nuts and bolts of of making the iPhone iPod Favicon / Apple Touch Icon is that you need to make 58 x 58 icon and save it as a PNG, (58 x 58 because it looks better when the iPhone iPod scales it down). Then source the code as a relative link below the html tag like this: "<link rel="apple-touch-icon" href="http://www.combsconsulting.com/iphone/images/favicon.png"/>".
If you want your iPhone iPod to work correctly when you turn it horizontally, and therefore stretch the header and footers to compensate. Look in the style sheet for "#header {height:55px;width:100%;background:#e7eef3 url(../images/header.jpg) 0 0 repeat-x;border-bottom:1px solid #7db9cd;}". What’s going on here is that I took a 1 x 55 image strip and repeated it a lot the x axis. Next I set the width to be 100% because I want the header to be set to the maximum width weather the iPhone iPod is vertical or turned horizontal. The next step in the equation is "#headerLogo {height:45px;width:132px;margin-left:28%;padding-top:5px;}". The methodology hear is to take a transparent png or gif and push it around. I set the margin to a percentage to compensate for whether the iPhone iPod were vertical or turned horizontal the logo would always be in the same proportion in the header, "margin-left:28%;".
I could explain every thing to extreme detail in the CSS, just know I used a lot of ">", a modern browser hack, that the iPhone iPod needs to work properly. Use Fire Bug at www.getfirebug.com, to peer into the code as well.
Note: If you need to no How To Hide URL On iPhone iPod, How To Make A Java Script Detect For iPhone & iPod, or How To Make Apple Touch Icon Favicon For iPhone iPod see the links below.
See:
How To Hide URL On iPhone iPod
How To Make Java Script Detect For iPhone & iPod
How To Make Apple Touch Icon Favicon For iPhone iPod