SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict
    Join Date
    Sep 2009
    Posts
    316
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Inconsistent rendering between iPhone and Browser

    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. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,171
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    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. #3
    SitePoint Addict
    Join Date
    Sep 2009
    Posts
    316
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    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.
    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. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,171
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    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

    Code:
    @media only screen and (min-width : 320px) and (max-width : 480px) {
    	
    }
    This article will give you a better idea of how this all works:

    http://www.quirksmode.org/blog/archi...el_is_not.html

    I think that will help explain why I think it's a messy area.

  5. #5
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,340
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Understand Your Meta-Tags
    http://developer.apple.com/library/s.../MetaTags.html

    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).
    Steve Husting


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •