SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Thread: iPhone Viewport

  1. #1
    SitePoint Guru Todd Temple's Avatar
    Join Date
    Mar 2005
    Location
    Tennessee
    Posts
    797
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    iPhone Viewport

    I have designed my page for a width of 480px and I wanted it to fit the width of the iPhone viewport, so I have tried these options but each of these options are not scaling the graphic to match the viewport width (despite the orientation). Can someone help me with the issue?

    <meta name ="viewport" content ="initial-scale = 1.0" width="480px">

    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>

    <meta name="viewport" content="width=device-width; initial-scale = 1.0" width="480px"/>

    Here is the pages HTML:
    HTML Code:
    <html>
    <head>
    <title>Sign-Up</title>
    <style type="text/css">
    <!--
    /* * {margin:0;padding:0;}
    html,body {height: 100%;}
    body {zoom:100%;} */
    #page {width: 100%;min-width:100%;} 
    -->
    </style>
    <!--<meta name ="viewport" content ="initial-scale = 1.0" width="480px">-->
    <!--<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>-->
    <meta name="viewport" content="width=device-width; initial-scale = 1.0" width="480px"/>
    </head>
    <body>
    <div id="page"><img src="pearl.jpg" /></div>
    </body>
    </html>
    And here is a link to the live version of the page:
    Quick Lane Club Sign-Up | Ray Varner Ford
    Todd Temple > T2 Design

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,547
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I would assume that you should be using:

    Code:
    <meta name="viewport" content="width=device-width; initial-scale=1.0">
    Which would assume device width for portrait and device height for landscape as mentioned here.

    Then you would set media queries for the different styles that may be required at those different widths otherwise your 480px wide page will be too wide for portrait mode.

    However mobiles aren't my strongpoint as I don't own one

  3. #3
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Off topic, don't own one Paul?! Wow. The iPhone has done for me what my desktop did for me back in 2000. Completely revolutinalized the way I run my life. You got to get an iPhone. Hands down (x10) best toy I've ever owned.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,547
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Off Topic:


    Quote Originally Posted by EricWatson View Post
    Off topic, don't own one Paul?! Wow. The iPhone has done for me what my desktop did for me back in 2000. Completely revolutinalized the way I run my life. You got to get an iPhone. Hands down (x10) best toy I've ever owned.
    LOL - We can't get a good mobile signal where we live for some reason so it's a bit pointless having a phone where no one can get hold of you most of the time. (When my son visits he has an iphone but he can't get any reception here either.)

    I suppose it would be useful when I'm out and about but I'd need to convince myself it was worth it


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
  •