how to make a homepage that matches for the iphone ?

Discussion in 'Mobile Web Development' started by rhanu, Mar 28, 2008.

  1. rhanu

    rhanu New Member

    Joined:
    Jan 16, 2008
    Messages:
    29
    Likes Received:
    0
    Device:
    2G iPod touch
    just wondering:

    how can i make a homepage which matches for the iphone ?
    i mean like the table or whatever is on the html/css page is fully zoomed
    like as an example this one
    Code:
    <html>
    <head>
    <title>Testpage</title>
    </head>
    
    <body
    <table border="1">
    <tr><td>some input here</td></tr>
    <tr><td>some more input here</td></tr>
    </table>
    </body
    </html>
    
    only a simple small table on the page , but the iphone / ipod touch doesnt zoom by default on the zoom

    anyone got an idea how to solve that ?
  2. JoshTouch

    JoshTouch New Member

    Joined:
    Oct 10, 2007
    Messages:
    120
    Likes Received:
    1
    Use this piece of code

    Please Register or Log in to view images



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

    Please Register or Log in to view images



    Josh
  3. rhanu

    rhanu New Member

    Joined:
    Jan 16, 2008
    Messages:
    29
    Likes Received:
    0
    Device:
    2G iPod touch
    works like a charm

    Please Register or Log in to view images

  4. xFinch713x

    xFinch713x New Member

    Joined:
    Jan 27, 2008
    Messages:
    164
    Likes Received:
    1
    Device:
    iPod touch
    except one thing, it doesnt move down to get the url out of view. is there a way to do that? i cant seem to find anything on it..
  5. ElectricBuffalo

    ElectricBuffalo New Member

    Joined:
    Dec 25, 2007
    Messages:
    185
    Likes Received:
    1
    yea, ive got the code... except believe me, it was hard to find... nobody seems to be very willing to help me with it either lol... but here ya go... it hopefully should work... however, for some reason i dont think this script works if it has everything fit on the page... here ya go...

    Code:
    <script type="application/x-javascript">
    addEventListener("load", function()
    {
        setTimeout(updateLayout, 0);
    }, false);
    
    var currentWidth = 0;
    
    function updateLayout()
    {
        if (window.innerWidth != currentWidth)
        {
            currentWidth = window.innerWidth;
    
            var orient = currentWidth == 320 ? "profile" : "landscape";
    
            document.body.setAttribute("orient", orient);
    
            setTimeout(function()
    
            {
                window.scrollTo(0, 1);
            }, 100);           
        }
    }
    
    setInterval(updateLayout, 400);
    </script>
  6. xFinch713x

    xFinch713x New Member

    Joined:
    Jan 27, 2008
    Messages:
    164
    Likes Received:
    1
    Device:
    iPod touch

Share This Page