This topic is locked

phprunner mobile app full screen in ios

12/20/2014 2:59:32 PM
PHPRunner Tips and Tricks
F
fantasmino author

Hi all,

With phprunner mobile theme and the columns by devices option it's possible to make Amazing php pages for mobile.

My only problem was that after add them to home screen the links was opened with safari and not in full screen mode and a way to invite the users to add the app to their home screen.

off course for most of you this seems to obvious solution,

This is my solution after looking around the web.

First 4 icons

60x60

76x76

120x120

152x152
code to add to head section on the first page of application

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

<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">

<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">

<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">


The tittle of app in head section on the first page of application

<meta name="apple-mobile-web-app-title" content="tittle">


Full screen mode hiding the browser's interface to add to head section of all pages

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


Styling status bar

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">



content options:

default

black

black-translucent
event to add on java script on load, this will open external links on browser

$(document).on('click', 'a', function(e) {

if ($(this).attr('target') !== '_blank') {

e.preventDefault();

window.location = $(this).attr('href');

}

});



script for invite the user to add icon to home:

add to home screen

or

mobile-bookmark-bubble
Probably most of you already know this

Please correct me if I wrote something wrong or miss

thanks