IPhone browser resolution / div problem

[JamesBarnsley]

Hi,

It is my understanding that the IPhone 5 has a resolution of …

1136px by 640px

So I have created a html page with a “div” that has a width and height set to the same size as the resolution above however when I view it through my IPhone 5 web browser it appears smaller and only fills about 2 thirds of the height and width. Implying that the browser is larger?

How is this possible?

James.

[zemaker]

are you setting the default margins and paddings to 0? Its a good practice anyways.

* {
margin:0;
padding:0;
}

[JamesBarnsley]

No,

I am just using …

html {

    height: 1136px;
    width: 640px;
    border: 1px solid white;

}

[zemaker]

setting the width and height to 100% will do the trick.

* {
    margin: 0;
    padding: 0;
}
html {
    width: 100%;
    height: 100%;
    border: 1px solid white;
}

[Emil]

Doesn’t the iPhone 5 have a viewport size of 320×568?

[JamesBarnsley]

Ok,

I cannot do this with width and height of 100%. I have different stylesheets for different phone resolutions. This stylesheet I am doing now is for the IPhone 5.

The specs say IPhone 5 has a resolution of …

1136px by 640px

But when using this code and viewing it in the IPhones browser …

html {

    height: 1136px;
    width: 640px;
    border: 1px solid white;

}

The white box it produces is smaller than the viewport area. About 1 third smaller each way, width and height.

“Doesn’t the iPhone 5 have a viewport size of 320×568? ”

It might do, but then why is the white box smaller and not larger than that area?

It is strange.

James.

[Emil]

Yes it’s strange. Maybe there is another wider container on the page?
Also, did you add
<meta name=”viewport” content=”width=device-width, initial-scale=1″> ?

[JamesBarnsley]

Hi,

Ok thanks for your help.

Not sure about the browser issue, but basically I am building a PhoneGap anyway. And for some reason I had to make it …

480px by 320px

For the resolution to work on that.

James.

[Author]

Posts