This topic is locked

Advanced Iphone styling

9/9/2011 8:23:17 AM
PHPRunner General questions
S
snuffi01 author

I'm looking for a way to make the new "Mobile template" look more like an App on Iphone and Ipad.

Ive been reading this guide: http://ofps.oreilly.com/titles/9780596805784/ch03_id35816678.html

So far i have been able to make the "Full screen mode" by adding the following in the x.htm file under catalog "mobile":

<meta name="apple-mobile-web-app-capable" content="yes" />

<meta name="apple-mobile-web-app-status-bar-style" content="black" />
But i havent been able to make th icon appear at the home screen.

Tried to put my image named: apple-touch-icon-precomposed.png

directly under the "mobile" catalog, doesnt work

also tried to put the following in the .htm file:

<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png" />

No luck <img src='https://asprunner.com/forums/file.php?topicimage=1&fieldname=question&id=17723&image=1&table=forumtopics' class='bbc_emoticon' alt=':(' />
Anyone tried this?
Would be nice i we could share some tips on how to make the mobile web be more like an "Native App" on Iphone and Ipad!
Best regards: Kristian

Sergey Kornilov admin 9/12/2011

According to this article apple-touch-icon-precomposed.png icon needs to be placed to website root directory. I did that and it worked.
If you want to make this icon application specific i.e. use a different icon for each application on your website do the following:

  1. Modify C:\Program Files\PHPRunner6.0\templates\layouts\page_mobile.htm file adding the following line:
    <link rel="apple-touch-icon-precomposed" href="mycustomicon.png" />
  2. Add mycustomicon.png file right to the output directory, where the rest of PHP files are.
    PS. in both scenarios I would recommend not using pre-composed image. Simply put file named apple-touch-icon.png to your website root directory and this is it.