If it has been opened in the browser, we can notify the user that they can add this site as a web app. You can also detect if the site is being accessed through the web browser or if it has been loaded from the home screen. 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. The two meta tags below scale the site to the mobile device’s screen and enable adding as a web app on the iPhone. These are the two graphics created in the first section of this post. There are two link tags to provide the iPhone with the icon and loading screen location. You may notice a few differences in the example above from a standard HTML page. Tony Phillips SharePoint and Web Design Blog HTML5 does not yet work in any desktop browser fully yet but more mobile web broswers are supporting it.Īlert('Install on iPhone by pressing Add to Home Screen') This image should be 320px wide and 460px high.
#Designbox facebook full#
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. The second image is for the app’s loading screen. Make sure your image is 57px by 57px and save it as a JPEG or PNG file. This is the icon you will see when you add it to your home screen. SharePoint Master Page for iPhone HTML 5 Web Appįirst create two images which will be vital in creating the iPhone web application. This entry was posted in Uncategorised and tagged CSS3, Derby, HTML and JavaScript, HTML5, Hull, iPad, iPhone, SharePoint 2010, SharePoint News, Tony Phillips on Januby Tony Phillips.
Startup png images for iPad should have the following dimensions:ĭefault Portrait png should be 768w x 1004hĭefault Landscape png should be 1024w x 748h This means it requires two loading images. The iPad can load web apps either when placed horizontally or vertically.
#Designbox facebook code#
The code above specifies different startup images for different devices. The following code needs to go in the head section of the HTML: 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. In a previous post I wrote about creating a HTML5 site which also worked as an iPhone Web App.
0 kommentar(er)
