: IPod / iPhone CSS Website Template w/ Height Width Dimensions You can see here a (very) simplified version of my website: http://ple100.free.fr/foo And on iPhone, it looks like this: http://ple100.free.fr/foo/iphone.png

@Miguel251

One solution would be to change:

<meta name="viewport" content="width=device-width, user-scalable=yes" />


To:

<meta name="viewport" content="width=350" />


You could also change the #site width to a percentage instead of a pixel count.

Otherwise you will want to go with a conditional css, or change your css to fit better.

Vote Up Vote Down

@Gretchen104

This first bit of code is a PHP browser sniffing snippet, the actual CSS we’ll use is not brought through via any server side code, we’ll use some CSS media queries for that. What we’ll use this code for is serving the markup with an iPhone specific meta tag and to shorten the current page’s title. max-device-width You want to use 480 pixels for the iPhone and 980 pixels for the iPod Touch.

<?php
$browser = strpos($_SERVER['HTTP_USER_AGENT'],"iPhone");
if ($browser == true)
{
$browser = 'iphone';
}
?>


What the above code does is sees if the user agent contains any instance of ‘iPhone’ using the strpos PHP function.

Or you could use this:

<link media="only screen and (max-device-width: 480px)" href="iphone.css" type="text/css" rel="stylesheet" />


Now, as all layouts differ I am going to assume a similar one to mine, a simple two column set up with a logo and menu in the header. If your layout is different I am sure you can quite easily retrofit it. As I mentioned before, remove all stylistic floats and set all widths to 100%. If you are using divs sensibly (i.e. for large bodies of content and not for nav items) this code should see you right for linearising the content:
@media screen and (max-device-width: 480px)
{
body{...}
div
{
clear:both!important;
display:block!important;
width:100%!important;
float:none!important;
margin:0!important;
padding:0!important;
}
}

Vote Up Vote Down