CODEWITHSUNDEEP
htmlioscssmedia-queriesresponsive
Prashant Agarwal
Prashant Agarwal

Reputation: 809

600 pixel wide page not appearing full on 640 pixel width mobile screen

I am testing a webpage on iPhone 5s (which has a resolution of 1136 x 640 pixels).

I have set meta as:

<meta name="viewport" content="user-scalable=yes, initial-scale=1, width=device-width, shrink-to-fit=no">

and css:

body {
min-width: 600px;
}

The remaining classes on the page do not have pixel based width. They are all using % based width, none of which is more than 100%.

The page however, does not appear in full on phone's screen. I have to scroll horizontally to see complete view. Only when I set the body's min-width to 300px, the page appears full on phone's screen.

Now I am wondering why 600px cannot appear in full when phone support 640px horizontal resolution. I may be missing something very basic, please guide.

Upvotes: 1

Views: 48

Answers (1)

meaning-matters
meaning-matters

Reputation: 22936

You're missing that you should count the point size of the iPhone screen, not the pixels.

This website which lists the viewport for most devices confirms that.

Upvotes: 1

Related Questions