Turning a WP Site Into an iPhone/iPad App

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.

Topic responsive hacks iphone Wordpress

Category Web

1
answered at

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" />

1
answered at
  • 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!

About

Geeks Mental is a community that publishes articles and tutorials about Web, Android, Data Science, new techniques and Linux security.