W00T I got my website working fullscreen on an iPhone!

Discussion in 'iPhone' started by ElectricMan5, Jun 2, 2009.

  1. ElectricMan5 macrumors regular

    Joined:
    Jul 22, 2008
    #1
    Sorry if this post is useless to you, but I finally figured out how to get all pages of my website running fullscreen on iphones and ipod touches! w00t!

    It just took me about 4 hours to figure out, but, oh well xD

    I just used these meta tags in my header, and then added the app to my homescreen:

    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta content="minimum-scale=1.0, width=device-width, maximum-scale=0.6667, user-scalable=no" name="viewport" />
    <script src="http://www259.pair.com/willdav/ihax/javascript/functions.js" type="text/javascript"></script>

    the funtion.js file is from iWebKit, but i'm hosting it on my website (which is also electricman5.com, but it expires in 5 days) so it doesnt have to go to the iWebKit website to get the javascripts.

    Sorry if you think this is spam, i'm just real happy with myself :p

    The results: go to electricman5.com/ihax/ and add it to your homescreen. Check out the icon i designed ;)
     
  2. thelordnyax macrumors regular

    Joined:
    Feb 18, 2008
    #2
    yeah, i remember reading this on macrumors awhile back...
    it can basically run webapps as apps
    it runs in Safari without Safari (you know what i mean)
    i wish more webapp pages would use it
     
  3. ElectricMan5 thread starter macrumors regular

    Joined:
    Jul 22, 2008
    #3
    Yeah. Now I'm a bit pissed, cause iWebKit looks a ton better than the theme I'm using, but it might be harder to create. Oi, I'll just stick to this one for now :).
     
  4. stezza333 macrumors regular

    Joined:
    May 12, 2009
    #4
    wow...very nice! Now thats what I call a true web app. :)

    Makes me want to make my own.
     
  5. ElectricMan5 thread starter macrumors regular

    Joined:
    Jul 22, 2008
    #5
    Thanks :) They're only like 20 tutorials on it, but I have about 400 more to transfer from ihax.org, so i'll take it step by step ^^
     
  6. redgaz26 macrumors 68020

    redgaz26

    Joined:
    Mar 6, 2007
    Location:
    Glasgow
    #6
    Wirelessly posted (Mozilla/5.0 (iPhone; U; CPU iPhone OS 3_0 like Mac OS X; en-us) AppleWebKit/528.18 (KHTML, like Gecko) Version/4.0 Mobile/7A312g Safari/528.16)

    The icon is not appearing on my home screen. It's just a plain white icon ??
     
  7. ElectricMan5 thread starter macrumors regular

    Joined:
    Jul 22, 2008
    #7
    Ive attached what the icon should look like. But when I add the webapp, it ends up looking like the one on the right. Why does this happen, and how can i fix this???
     

    Attached Files:

  8. dissdnt macrumors 65816

    dissdnt

    Joined:
    Aug 3, 2007
    #8
    Should be named apple-touch-icon.png

    in your root, i believe.
     
  9. bladehavoc macrumors member

    Joined:
    Jul 11, 2008
    #9
    The icon should just be a plain 57x57 square icon. Apple provides the gloss and rounded edges for you.
     
  10. stezza333 macrumors regular

    Joined:
    May 12, 2009
    #10
    It seems like the shadow has been added twice. Same with the glass effect. It seems that that the iphone automaticaly adds the effects for you. Try using a plain icon (no effects/shadows) and see what happens.

    Edit:
    Whoops didn't see this post :eek:
     
  11. ElectricMan5 thread starter macrumors regular

    Joined:
    Jul 22, 2008
    #11
    Thanks guys. I'll try it now :)

    Do I have to add the gradient for the icon? Cause i just downloaded the blue icon off the internet, and added the computer :eek:

    Edit: Nevermind! Got it working perfectly now :) Thanks!
     
  12. aresinferno macrumors regular

    Joined:
    Oct 13, 2008
    #12
    No, you do not have to.

    Code:
    <link rel="apple-touch-icon-precomposed" href="images/icon.png">
    
    The precomposed bit in the icon tells the iPhone that you have added the gloss and curves yourself. Just change the href to the location of the icon and add it in the head section. And congrats on getting fullscreen mode working. I am developing a fullscreen UI for the iPhone that will be free to use once I am finished with it.
     
  13. ElectricMan5 thread starter macrumors regular

    Joined:
    Jul 22, 2008
    #13
    I got it working :) my app: http://electricman5.com/ihax/
     
  14. ElectricMan5 thread starter macrumors regular

    Joined:
    Jul 22, 2008
    #14
    Also, are there any different colors I can change the iphone/ipod touch menu bar too?
     
  15. rorschach macrumors 68020

    rorschach

    Joined:
    Jul 27, 2003
    #15
    Yep:

    Code:
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    The "content" part can be "default" (for the normal grey status bar), "black" (for the solid black bar) or "black-translucent" (the page will take up the whole screen with a semi-transparent black status bar overlaid at the top.)
     
  16. ElectricMan5 thread starter macrumors regular

    Joined:
    Jul 22, 2008
    #16

    I have the black one already on, but the black translucent one sounds good :)

    Any way to make is completely transparent?
     
  17. aresinferno macrumors regular

    Joined:
    Oct 13, 2008
    #17
    Unfortunately no. I have been developing full-screen things for a long time and so far, at least on beta 2.1 or below there is no possible solution.
     
  18. stezza333 macrumors regular

    Joined:
    May 12, 2009
    #18
    Can anyone recommend any free services to host something like this? I just want to have a play around with making my own website for the iPhone. :)
     
  19. ElectricMan5 thread starter macrumors regular

    Joined:
    Jul 22, 2008
    #19
    K i was expecting that.


    It's not used for hosting websites, but it runs very well and is better than paying for hosting. View this: http://ihax.org/2gb-of-free-webhosting-free-domain-t394.html

    As for creating the webapp with a GUI, I'd get RapidWeaver from realmacsoftware.com

    It has the built-in iPhone theme, which is the one I'm using.

    If you want a professional webapp layout, use iWebKit from http://iwebkit.net/ and check out the demo of the webapp here: http://demo.iwebkit.net/

    View the differences between mine and that one :-D
     

Share This Page