Search code examples
iphonehtmlcssipadiphone-standalone-web-app

Change iPad/iPhone layout if user adds to homepage

In iPhone/iPad you can have the address bar removed by using a meta-tag on your page. However it only works if a user clicks the 'add to home page button'.

For more info iPad WebApp Full Screen in Safari

I need to find a way to slightly change the CSS if the user is viewing the page without the address bar(i.e. accessing the site from homepage.).

padding-top:64px;

Has anyone found a way to deal with this issue?

Solution

  • You should look at window.navigator.standalone in JS and then, for example, set standalone class to HTML element, so you could add the following rule to your CSS that would be applied only when the page is added to homepage:

    .standalone .yourElement {
    padding-top: 64px;
}