Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

With the advent of responsive design, it's beginning to simply make sense that we could make a site into an app. The concept is simple:

  • When the user is on the site, remove the browser around the site so that it appears to be like any other app
  • Provide the appropriately-sized icons for devices (tablets, smartphones, etc.)
  • Meet all criteria necessary to distribute the app via the Apple app store

I'm curious if anybody has the hacks, tutorial, or information necessary to achieve this.

share|improve this question

closed as off topic by s_ha_dum, Michael, Wyck, Brian Fegter, brasofilo Feb 7 '13 at 20:24

Questions on WordPress Development Stack Exchange are expected to relate to WordPress within the scope defined by the community. Consider editing the question or leaving comments for improvement if you believe the question can be reworded to fit within the scope. Read more about reopening questions here.If this question can be reworded to fit the rules in the help center, please edit the question.

2 Answers 2

up vote 2 down vote accepted

The best way to do this would be to use CSS3 media quires: @media (max-device-width: 480px) but requires more work.

The quick and dirty way to make your WordPress theme app-like would be to add the viewport meta tag to the <head> of your page:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Viewport scales you page to fit the users device.

To hide the address bar in iOS and Android Just add this line of JavaScript to your page:

// When ready...
window.addEventListener("load",function() {
  // Set a timeout...
  setTimeout(function(){
    // Hide the address bar!
    window.scrollTo(0, 1);
  }, 0);
});

You can also add this meta tag witch tells iOS your site is a web app and to hide the address bar:
<meta name="apple-mobile-web-app-capable" content="yes" />

share|improve this answer
  • How much of the browser you can hide depends on the browser you're using. This might help out:
  • You can't simply submit a website to the App Store, but you do have options.
    • Suggest (perhaps via a well-placed overlay on your mobile site) that the user adds your website to their home screen by tapping the share button (in Safari), then "Add to Home Screen." Your website is more like an app there: no browser interface and an icon of your choice on the home screen.
    • Look into a framework like PhoneGap

Hope that helps!

share|improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.