Using CSS to create a iphone compatible site?

Discussion in 'CSS' started by misohoni, Aug 11, 2008.

  1. #1
    I'm not sure if any JS is need, but what resources do I need to create a iphone compatible site - so that when i view the site on my iphone it goes to an iphone version and fits on the screen?

    Thanks
     
    misohoni, Aug 11, 2008 IP
  2. misohoni

    misohoni Notable Member

    Messages:
    1,717
    Likes Received:
    32
    Best Answers:
    0
    Trophy Points:
    200
    #2
    Sort of answered part of my question, but not the CSS part:

    add in the head:
    <meta name=”viewport” content=”width=320,user-scalable=false” />

    - Create a 57x57 PNG.
    - Name it "apple-touch-icon.png"
    - Put in the root folder of your website.
     
    misohoni, Aug 11, 2008 IP
  3. edango

    edango Well-Known Member

    Messages:
    299
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    100
    #3
    Yeah, they're similar to mobile site compatibility, essentially the difference is that it needs to be resized. Tho, many mobile phones have 3rd party browser hacks that eliminate this need. It just depends
     
    edango, Aug 11, 2008 IP
  4. misohoni

    misohoni Notable Member

    Messages:
    1,717
    Likes Received:
    32
    Best Answers:
    0
    Trophy Points:
    200
    #4
    Yep I think you're right. I think I could style a iphone compatible site now, but how could do I/the iphone automatically detect and present an iphone compatible page to the user?

    I saw a guy who has .com/iphone/ and then when viewing on an iphone this page is displayed.
     
    misohoni, Aug 11, 2008 IP
  5. PSHeads

    PSHeads Peon

    Messages:
    112
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #5
    do you mean a site that's valid and also fits on the page? if you do then you shoud simply go about the designing process as you normally would but use % instead of px or em when sizing div objects. iot's a lot easier if that's what you need help with
     
    PSHeads, Aug 12, 2008 IP
  6. misohoni

    misohoni Notable Member

    Messages:
    1,717
    Likes Received:
    32
    Best Answers:
    0
    Trophy Points:
    200
    #6
    Good idea to use %'s. But how would the iphone detect it's custom page? Is there some special redirect code I need to use?
     
    misohoni, Aug 12, 2008 IP
  7. Arnold9000

    Arnold9000 Peon

    Messages:
    241
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #7
    I don't understand the problem. I simply used the correct xhtml standards (strict dtd) and fixed width and my site showed up fine on an iphone (or at least somebody told me that). www.comh.com Isn't the iphone supposed to resize the screen when you tap an area? I don't think you need it to be perfectly sized when it first comes up because the iphone gives you the ability to resize easily. That's supposed to be the big advantage of it, right?
     
    Arnold9000, Aug 12, 2008 IP
  8. brothersister

    brothersister Peon

    Messages:
    4
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #8
    A quick googling of your problem gave me this page:

    http://www.askdavetaylor.com/detect_apple_iphone_user_web_site_server.html

    It sames to be a bit of javascript to detect the HTTP_USER_AGENT
     
    brothersister, Aug 12, 2008 IP
  9. misohoni

    misohoni Notable Member

    Messages:
    1,717
    Likes Received:
    32
    Best Answers:
    0
    Trophy Points:
    200
    #9
    Thanks brother sister, that's exactly what I'm looking for and I'll implement the Shell script.
     
    misohoni, Aug 13, 2008 IP