Tag Archives: iPhone

Supporting iPad in a HTML5 Web App

In a previous post I wrote about creating a HTML5 site which also worked as an iPhone Web App. If the web app needs to also support iPad integration, there are a few more lines needed in the HTML as well as a couple more loading images.
The following code needs to go in the head section of the HTML:

<!--iPad and iPhone startup app screens -->
<!-- iPhone startup image -->
<link rel="apple-touch-startup-image" href="https://siteURL/Images/startup.png"/>
<!-- iPad startup image portrait view -->
<link rel="apple-touch-startup-image" href="https://siteURL/Images/startup_ipad.png" media="no mobile, screen and (device-width: 768px) and (orientation:portrait)"/>
<!-- iPad startup image landscape view -->
<link rel="apple-touch-startup-image" href="https:/siteURL/Images/startup_ipad_hor.png" media="no mobile, screen and (device-width: 768px) and (orientation:landscape)"/>

The code above specifies different startup images for different devices. The iPad can load web apps either when placed horizontally or vertically. This means it requires two loading images.
Startup png images for iPad should have the following dimensions:
Default Portrait png should be 768w x 1004h
Default Landscape png should be 1024w x 748h

SharePoint Master Page for iPhone HTML 5 Web App

iPhone Web AppIn my last post, I showed how to create an iPhone web app using HTML5. Recently I have been working on constructing a HTML5 SharePoint Master Page that also works as an iPhone web app.
I managed to do this by downloading Randy Drisgill’s Starter Master Pages Download Here
I then removed as many tags as possible without breaking the publishing Master Page. Changed the doc type, added the meta and link tags (see previous post). This allowed me to create a HTML5 compliant SharePoint Master page which also worked as an iPhone web app. Further customisation is needed to convert the TMG/ISA login form to a mobile friendly smart phone page if you are using an authenticated SharePoint 2010 site.

Creating a HTML5 iPhone Web App!

iPhone App Icon

First create two images which will be vital in creating the iPhone web application. The first image is for the app’s icon. This is the icon you will see when you add it to your home screen. Make sure your image is 57px by 57px and save it as a JPEG or PNG file.

iPhone icon

Startup Screen

The second image is for the app’s loading screen. When the icon is selected, the app will start in full screen mode and display a loading screen while it loads the HTML page in the background. This image should be 320px wide and 460px high.
Startup Screen

HTML 5 page

HTML5 does not yet work in any desktop browser fully yet but more mobile web broswers are supporting it.

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset=utf-8>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
		<meta name="apple-mobile-web-app-capable" content="yes">
		<title>tony is here iPhone web app</title>
		<link rel="stylesheet" href="html5css.css">
		<link rel="apple-touch-icon" href="images/tony-icon.jpg" />
		<link rel="apple-touch-startup-image" href="images/tonystartup.png" />
		<!-- Prompt user to install on iphone if accessed through mobile safari -->
		<script type="text/javascript">
			if (window.navigator.standalone) {
				// fullscreen mode
			} else{
				alert('Install on iPhone by pressing Add to Home Screen')
			}
	</script>
	</head>
	<body>
		<section id="wrapper">
			<header>
				<h1>Tony Phillips SharePoint and Web Design Blog</h1>
			</header>

			<article>
				<section>
					<button type="button" name="Blog" class="css3button" onclick="parent.location='blog.html'">Blog</button>
					<button type="button" name="Linked In" class="css3button" onclick="parent.location='linkedin.html'">Linked In</button>
					<button type="button" name="Facebook" class="css3button" onclick="parent.location='facebook.html'">Facebook</button>
					<button type="button" name="Twitter" class="css3button" onclick="parent.location='twitter.html'">Twitter</button>
					<button type="button" name="Email" class="css3button" onclick="parent.location='email.html'">Email</button>
				</section>
			</article>
		</section>
	</body>
</html>

You may notice a few differences in the example above from a standard HTML page. There are two link tags to provide the iPhone with the icon and loading screen location. These are the two graphics created in the first section of this post.

<link rel="apple-touch-icon" href="images/tony-icon.jpg" />
<link rel="apple-touch-startup-image" href="images/tonystartup.png" />

The two meta tags below scale the site to the mobile device’s screen and enable adding as a web app on the iPhone.

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
<meta name="apple-mobile-web-app-capable" content="yes">

The only new tags in this example are the section, header, article and button tags which all make it much easier to create websites in HTML5. HTML5 is worth a google!

JavaScript

You can also detect if the site is being accessed through the web browser or if it has been loaded from the home screen. If it has been opened in the browser, we can notify the user that they can add this site as a web app. All you need to do is add the following JavaScript in the HEAD section of the HTML.

// Prompt user to install on iphone if accessed through mobile safari
if (window.navigator.standalone) {
// fullscreen mode
} else{
alert('Install on iPhone by pressing Add to Home Screen')
}

Make sure you take full advantage of CSS3 when styling your site. Rounded corners and shadows look great on buttons without the need for background images or jQuery!

To see this example working go to the following URL on your iPhone and add it to your home screen. In my next post I will explain how this could also be a SharePoint MasterPage!

http://www.tonyishere.co.uk/mobile