I found out that
<link rel="apple-touch-icon" href="touch-icon-iphone.png" />
is a way to make an icon on iPhones.
What is the way to make an icon on androids?
Also are there other ways to implement creating an icon which is linked to simply a mobile website?
You actually can't. This functionality is unique to iOS devices.
EDIT:
However, some browsers may use the standard favicon used by most browsers.
Related
I developed this website
It looks fine on most browsers and OSes on PCs. It even looks nice on my HTC with Opera Mobile. Unfortunately I keep getting reports about how it displays on iphones. I don't have an iphone so here are my questions:
Is there an easy way to reliably check (emulate) my website on iphone (I tried sites like this
but what this site does it opens iframe in safari trying to emulate ihopne native screen size, but the problem is somewhere else...)?
Any quick tips on obvious mistakes I made?
Thanks for help
If you have got a computer with MacOS installed (it could even be a hackintosh), you can install Xcode there and then run the iPhone simulator from it. Once you are there, you can open Safari in the simulator and enter your site URL to have a look.
I am also attaching a snapshot of the simulator with your home page.
You might try defining the viewport in your HTML:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
Also, have a look at the other meta tags available in Mobile Safari.
I partially found the answer. As it turned out most mobile browsers (including safari for iphone and default browser in samsung galaxy) don't support
{ background: transparent;}
So I need to provide fallback colour as described here: http://css-tricks.com/rgba-browser-support/
I'm currently building a mobile web app, and am using <meta name="apple-mobile-web-app-capable" content="yes"> in the header.
The app displays fine in the Safari browser on iPhone and iPad, however once it is saved to the home screen and launched from there, the stylesheet is not being read at all. If I add inline styles to elements they are read, but nothing from my style.css takes effect.
Is this related to the manifest at all, or is there something else I need to change?
This Works fine for me in my iPhone, Check out the Screenshots----
I want to create an icon on an iPhone to link to a web app, but assuming my users won't know to find "add to home" I think it's better to have an html link saying "click here to add an icon to your desktop" (or something along those lines).
I know the code for the icon is
<link rel="apple-touch-icon" href="touch-icon-iphone.png" />
But what's the code for the "click here"?
Thanks!...any time you help me you save a kitten!!
There's unfortunately no way to add a bookmark to home screen by code, you have to indicate to your users that they need to do it manually.
To do this, there is a neat little JS library: mobile-bookmark-bubble.
The Mobile Bookmark Bubble is a JavaScript library that adds a promo
bubble to the bottom of your mobile web application, inviting users to
bookmark the app to their device's home screen. The library uses HTML5
local storage to track whether the promo has been displayed already,
to avoid constantly nagging users.
The current implementation of this library specifically targets Mobile
Safari, the web browser used on iPhone and iPad devices.
You have to write the code for the 'click here' yourself, it's not a standard part of the operating system or anything. It's just HTML/CSS/JS.
Now I've seen loads of websites that look great on the iphone, such as http://twitter.com and http://deviantart.com however I can't for the life of me get the right structure within my mobile web application to make it show up as if it was an iphone application.
I've discovered iphone jquery ( http://jqtouch.com ) which seems to be the most promising javascript lib for developing nice effects to make everything look authentic. However I'm still having issues with getting the website to fill the screen on iphone safari.
I can never find any resourceful websites that actually explain how to get the effect of having it fully zoomed in and filling the screen.
Are there any libraries that help develop websites for mobile devices such as iphones.
To run fullscreen the webpage needs to be run as a webapp (bookmaked on the homescreen). You also need to indicate in your HTML that it is a web app.
Taken from this website :
<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" />
<meta names="apple-mobile-web-app-status-bar-style" content="black-translucent" />
The one I've used this in the past is the iui library and it worked well for my case. The example code makes it pretty easy to understand.
Or checkout JQTouch. You can get up and running very quickly.
This is not a technical question, but given that there are a few iPhone developers on here I figured I'd ask. Are there design firms advertising services for designing custom iPhone icons?
I'm sure that you can find plenty on the web, just google it.
Icon Factory and IconShock are one of my favorites, but there are individuals that can make you what you need for a price, just ask them, take a look for example at the icons made by Made By Sofa company, I do love them, and I would suggest you to contact them directly, they made pretty famous icons on the market!
but for the iPhone, you will need a 75x75 pixels icon in PNG format, the round curves are made automatically by the iPhone OS.
you can test it using a webpage, just add this line of code in your HTML page (Head section):
<link rel="apple-touch-icon" href="myIcon.png" />
and bookmark it to the homepage with an iPhone or iPod Touch
Any graphic designer can make an iPhone icon. There's no specialised skill required.
A quick google found SoftFacade and FastIcon. Though, I don't think you'd need to look for only "iphone icon" artists. If you can find and icon you like, it's pretty easy to give it the iphone look.