Inconsistent rendering between iPhone and Browser

Mobile
1

I may be doing a number of things incorrectly but I don’t have any clue at the moment.

I’m designing a site for mobile right now. When i view a draft online I have the browser set up to display the resolution I want to view it at (640x960) on the desktop. However when I view it on the mobile device, it’s at a completely different resolution. I’m referring specifically to an iphone 4S. It’s advertised as having a 640x960 resolution but it’s not matching up to what i’m viewing on the desktop. What am I doing wrong? Thanks in advance.

2

This is a messy area, but to start with, the official iPhone dimensions are 320px x 480px, regardless of the actual screen pixels. Are you using @media queries?

Feel free to post a link.

3

I don’t have a link I can share at the moment but can you elaborate on the dimensions thing? I’m completely confused by that. The official information states that something like the iPhone 4S is 640x960 however when I view a site for that size on the phone, the resolution on this phone appears to be bigger and differs from I view on the desktop. How does 320x480 fit into this equation? Can you tell me more about how this is a “messy area”?

4

All iPhones act like they are 320px x 480px, regardless of their actual pixel dimensions. So if using @media rules, you target an iPhone with

@media only screen and (min-width : 320px) and (max-width : 480px) {
	
}

This article will give you a better idea of how this all works:

I think that will help explain why I think it’s a messy area. :slight_smile:

5

Understand Your Meta-Tags

Your metatags may be wrong. And make sure you are viewing the content in a webkit browser like Safari or Chrome (not Firefox or IE).