iPod/ iPhone CSS Website Template w/ Height Width Dimensions

You can see below a (really) streamlined variation of my internet site : http://ple100.free.fr/foo
And on iPhone, it resembles this : http://ple100.free.fr/foo/iphone.png

As you can see, we do not see the appropriate boundary of the web page. And also we have a black approach the left ... I would certainly like it to be similar to this : http://ple100.free.fr/foo/iphone2.png
Do you recognize just how to address this trouble?

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

0
2019-12-02 02:52:24
Source Share
Answers: 3

See The CSS Box Model

A size of "350px" most likely is refraining what is anticipated.

Satisfied coding.

0
2019-12-03 04:16:45
Source

This first little code is a PHP internet browser smelling fragment, the real CSS we'll make use of is not brought with using any kind of web server side code, we'll make use of some CSS media questions for that. What we'll utilize this code for is offering the markup with an iPhone details meta tag and also to reduce the existing web page's title. max - tool - size You intend to make use of 480 pixels for the iPhone and also 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 has any kind of instance of 'iPhone' making use of the strpos PHP function.

Or you can utilize this :

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

Now, as all formats vary I am mosting likely to think a comparable one to mine, a straightforward 2 column set up with a logo design and also food selection in the header. If your format is various I make certain you can fairly conveniently retrofit it. As I stated in the past, remove all stylistic drifts and also set all sizes to 100%. If you are making use of divs smartly (i.e. for huge bodies of web content and also except nav things) this code need to see you right for linearising the web 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;
    }
}
0
2019-12-03 04:16:25
Source

One remedy would certainly be to transform :

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

To :

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

You can additionally transform the #site size to a percent as opposed to a pixel matter.

Or else you will certainly intend to select a conditional css, or transform your css to fit far better.

0
2019-12-03 04:15:47
Source