Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

W00T I got my website working fullscreen on an iPhone!

E

ElectricMan5

macrumors regular
Original poster
Jul 22, 2008
204
0
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 ;)
 
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
 
thelordnyax said:
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
Click to expand...

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 :).
 
wow...very nice! Now thats what I call a true web app. :)

Makes me want to make my own.
 
stezza333 said:
wow...very nice! Now thats what I call a true web app. :)

Makes me want to make my own.
Click to expand...

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 ^^
 
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 ??
 
redgaz26 said:
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 ??
Click to expand...

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???
 

Attachments

  • homescreen.png
    homescreen.png
    9.4 KB · Views: 1,815
  • icon.png
    icon.png
    5.3 KB · Views: 1,813
ElectricMan5 said:
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???
Click to expand...

The icon should just be a plain 57x57 square icon. Apple provides the gloss and rounded edges for you.
 
ElectricMan5 said:
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???
Click to expand...

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:
bladehavoc said:
The icon should just be a plain 57x57 square icon. Apple provides the gloss and rounded edges for you.
Click to expand...

Whoops didn't see this post :eek:
 
stezza333 said:
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:
Click to expand...

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!
 
ElectricMan5 said:
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!
Click to expand...

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.
 
aresinferno said:
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.
Click to expand...

I got it working :) my app: http://electricman5.com/ihax/
 
ElectricMan5 said:
Also, are there any different colors I can change the iphone/ipod touch menu bar too?
Click to expand...

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.)
 
rorschach said:
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.)
Click to expand...


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

Any way to make is completely transparent?
 
ElectricMan5 said:
I have the black one already on, but the black translucent one sounds good :)

Any way to make is completely transparent?
Click to expand...

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.
 
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. :)
 
aresinferno said:
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.
Click to expand...

K i was expecting that.


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.
Click to expand...

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
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back