iPod / iPhone CSS Website Template w/ Height Width Dimensions

Question

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

As you can see, we don't see the right border of the page. And we have a black border on the left... I'd like it to be like this: http://ple100.free.fr/foo/iphone2.png
Do you know how to solve this problem?

Here is the CSS: http://ple100.free.fr/foo/style.css

Answer 1

See The CSS Box Model

A width of "350px" likely is not doing what is expected.

Happy coding.

Answer 2

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;
    }
}

Answer 3

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.