I'm practising on a mobile website but I'm encountering two problems.
On my iPhone I'm able to press the button down in the middle of the Safari Browser and use 'Add to homescreen' in order to place an 'app icon' on my iPhone screen between the other apps. When I press the icon of my site, it obviously redirects me to my website and (thanks to a javascript file) hides the browser navigation bars. Though, when I press an 'a href' link on the site, I'm being taken back to the safari browser to open it there.
I think this is because I wrote it like this:
And on my mobile, I'm accessing the site by an IP address.
Is there any way to solve this?
--
The other problem:
When I use 'add to homescreen' in Safari, I'm supposed to give it a name. It's automatically using my 'title' given in the HMTL file. But how am I supposed to give the app an icon? It's currently just using some sort of a screenshot of the website as the icon ..
iphone-app-icon-html-web-app-home-screen-icon
The iPhone Mobile Safari web browser recognizes a special HTML tag that lets you add an iPhone app icon to your HTML application. Here's the syntax that lets you add an iPhone app icon to your web app:
<link rel="apple-touch-icon" href="/my-app-icon.png" />
This HTML link tag with the apple-touch-icon in the REL field tells the iPhone Mobile Safari browser to use this icon as the app icon for your web app.
iPad and iPhone app icon pixel size
To support the higher-resolution iPhone 4, your iPhone app icon should be a 114 by 114 pixel icon. Older iPhones used 56x56 pixel icons (or possibly 57x57), and the iPad uses a 72x72 pixel icon, and the image you supply will be scaled down and work on all of these devices. Here's a quick summary:
iPhone 4 - 114x114 pixels
Older iPhone - 57x57 pixels
iPad (version 1) - 72x72 pixels
If you prefer a little more control of your app icon size, Apple's documentation shows the following examples:
<link rel="apple-touch-icon" href="touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone4.png" />
Related
I am very new to mobile development so please don't knock me to much for newbie questions.
I think I have the correct meta tags.
<meta name="viewport" content="width=device-width, initial-scale=1">
From apples site it said use the below tag to allow running in full screen mode but it does not seem to work.
<!-- Allow web app to be run in full-screen mode. -->
<meta name="apple-mobile-web-app-capable"
content="yes">
Width and Height are set for Iphone 4S on IOS 8
width: 320px;
height: 480px
I can post the full code if it will help it is very simple 1 page layout header with two buttons, content just text, and a footer with nav icons
The problem as I see it is that it is not full screen and because of this the IOS navigation bar at the bottom cuts off my footer which has an icon menu
I figured it out, the meta tags are correct, you just have to create a shortcut on the home screen by clicking on the up arrow box on the bottom bar in safari and choosing add to home screen. Then launch your app and presto bars are gone. Just browsing to say 192.../yourapp does not work you have to add a shortcut to the homescreen to remove bars
So I've only seen one website do this and I'm very curious to know how they do it. I'm using an iPhone 4 with iOS5 by the way.
Go to http://m.funnyordie.com/ (Will Ferrell's sketch comedy site) on mobile Safari, add it to the homescreen, and then click on the homescreen icon that was just added.
The mobile site shows up without any of the Safari buttons or address bar. It even shows up in the open app tray as an open stand-alone app (double-tab the home button to see what I mean when Funny or Die isn't in the foreground).
You can navigate the videos on the page and even search, but when you click one of the other tabs (Most Viewed, FoD Exclusives) it takes you to the Safari app for a new tab.
I've never seen anyone else do this and I'm very curious to know how they do this. Anyone know?
It's called a Web Clip and if you specify some meta data in your html you can have it appear on the home screen with an icon
https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html
To add an icon:
<link rel="apple-touch-icon" href="/custom_icon.png"/>
To have a startup image:
<link rel="apple-touch-startup-image" href="/startup.png">
To hide the navigation bar:
<meta name="apple-mobile-web-app-capable" content="yes" />
To change the status bar appearnace:
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
(Note: on iOS 15, the method above won't work according to: https://developer.apple.com/forums/thread/683403)
To change the status bar appearnace on iOS 15:
<meta name="theme-color" content="#ecd96f">
Also for information it seems they are using jQueryMobile pretty heavily (jquerymobile.com) which I think can do a lot of all that for you.
On Apple iPhones and iPod Touches, you specify a link to an icon file like so:
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
...but on this page, it recommends that you specify two different sizes of icon, one for iPhone < 4 and another for iPhone 4.
There is no documentation I can find that shows how to specify the two separate icons. Can anyone help?
There are plenty of documentation about this on Google.
Just use:
<!-- **normal** (iPhone/iPod **non retina** display) -->
<link rel="apple-touch-icon" href="apple-touch-icon.png"/>
<!-- **normal** (iPhone/iPod **retina** display) -->
<link rel="apple-touch-icon" href="apple-touch-icon-72.png" sizes="72x72"/>
<!-- and **iPad** version -->
<link rel="apple-touch-icon" href="apple-touch-icon-114.png" sizes="114x114"/>
As an additional info, you can have the icon without the gloss effect if you use apple-touch-icon-precomposed instead of apple-touch-icon.
and there are several tags you can use in order to have all features of Safari Mobile like splash screen, etc
also, give this Mobile Tuts article a read and you will know almost everything you need to have a brilliant web app
The HTML tag :
<link rel="apple-touch-icon" href="/customIcon.png"/>
seems to picks up the text it will use from the first 12 characters of the HTML tag:
<title>123456789012...</title>
when you select the 'Add to Home' option in the Safari browser. However only the first 9 character are displayed in the iPhone's desktop. If more than 9 are in the text dialog box, the result is a '...' name on the desktop of the iPhone. The <title> tag often has more than 9 or 12 characters to name the web page.
Is there a way to keep the web page's <title> attribute intact and long while specifying a 9 character name of the desktop icon on the iPhone?
I have tried the:
title="12345689" attribute in the <link rel> attribute with no luck.
Thanks in advance!
You can't increase the number of characters shown under the icon but you can get it to default to something other than whats in the <title> of the page with this meta tag.
<meta name="apple-mobile-web-app-title" content="New Title">
I think this may only have support from iOS 6 up though.
No, there is no way you can lengthen the title on the homescreen. However, native iOS Apps cannot do this either if it's any consolation.
After peeking at the SO source, I noticed this tag:
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
Which after a quick Google revealed an Apple "favicon" type thing for display on your homepage ("WebClip Bookmark" to be exact).
The only other one that jumps to mind is the:
<input type="search" results="5"/>
(source: alexking.org)
This type="search" causes the field to "inherit" the Apple search icon, and the optional results="x" enables a history of "x" keywords to be maintained.
I'm therefore wondering, what other Apple/Safari (iPhone/iPod Touch) specific HTML tags and attributes are out there that I'm not aware of! Curious minds need to know!
<meta name="viewport" content="width=320, initial-scale=2.3, user-scalable=no">
Allows you to set the width, height and scale values
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
Set the status bar style, pretty self explanatory.
<meta name="apple-mobile-web-app-capable" content="yes" />
As Marc mentioned above, and is explained in the daringfireball.net link, allows the webpage to be run in full-screen mode, as opposed to through safari.
There's other various attributes that are supported and are documented here: https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html
Thought I'd add my own answer with some new things I've seen crop up.
1.) There's an option for providing a higher definition iPhone 4 retina display icon
<link rel="apple-touch-icon" href="icons/regular_icon.png" />
<link rel="apple-touch-icon" href="icons/retina_icon.png" sizes="114x114"/>
2.) If you find the default glossy overlay that iPhone/iPod/iPad places on app icons is too much, you can request to not have it added by adding "precomposed" to the rel attribute.
<link rel="apple-touch-icon-precomposed" href="/images/touch-icon.png" />
3.) You can make iPhone links for phone/sms texting directly do the desired action
Call us
Text us
4.) Not quite an HTML tag, but a handy option for toggling CSS based on orientation
<script type="text/javascript">
function orient(){
switch(window.orientation){
case 0:
document.getElementById("orient_css").href = "css/iphone_portrait.css";
break;
case -90:
document.getElementById("orient_css").href = "css/iphone_landscape.css";
break;
case 90:
document.getElementById("orient_css").href = "css/iphone_landscape.css";
break;
}
}
window.onload = orient();
</script>
5.) You can provide a special CSS stylesheet for iPhone 4's retina display which supports 4x as many pixels as the original.
<link rel="stylesheet" type="text/css" href="../iphone4.css"
media="only screen and (-webkit-min-device-pixel-ratio: 2)" />
Thanks to #Sarah Parmenter over on 24 ways for this added information.
A useful header tag for single-purpose webapps is apple-mobile-web-app-capable. When the user creates a home screen shortcut for the site, it will launch in 'fullscreen' mode, separate from the normal Mobile Safari application and without the URL bar or other chrome. If the site is nicely designed it can feel almost like a native iPhone app.
The above mentioned documentation has moved. These are the new locations.
Safari HTML Reference:
https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/
Safari Web Content Guide:
https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/
#scunliffe I took your orientation switch a step further:
function orient(o){
switch(o){
case -90:
case 90:
$('#container').removeClass().addClass('landscape');
break;
default:
$('#container').removeClass().addClass('portrait');
break;
}
}
It turns out, there are a lot of them!
I found this one interesting:
To specify an icon for the entire website (every page on the website), place an icon file in PNG format in the root document folder called apple-touch-icon.png or apple-touch-icon-precomposed.png. If you use apple-touch-icon-precomposed.png as the filename, Safari on iPhone won’t add any effects to the icon.
precomposed is available to iPhone OS
2.0 and later
The DaringFireball link Marc shared links to the Safari Web Content guide. As mentioned by Andy, you have to sign up for it, but it's free and easy (well, not as easy as OpenID, but close).
Safari Web Content Guide