iPhone web app

Vytvoření webové aplikace tak, aby se tvářila jako aplikace pro iPhone nebo iPad.

Pokud potřebujete jednoduchou aplikaci pro iPad nebo iPhone pro vlastní potřeby, můžete ji vytvořit formou webové

aplikace.

Nastavení hlaviček

Nejdůležitelší je nastavení hlaviček a zvětšení viewportu, aby se nám naše aplikace zobrazovala v safari bez všech

nepotřebných lišt. správným nastavením hlaviček dokážeme zrušit jak adresní, tak stavový řádek:

&lt;meta 	name=&quot;viewport&quot;  content=&quot;width=device-width; initial-scale=1.0; maximum-scale=1.0; 

user-scalable=0;&quot; /&gt;
&lt;meta 	name=&quot;apple-mobile-web-app-capable&quot; content=&quot;yes&quot; /&gt;

user-scalable=0;" />

Nastavení ikony aplikace

Další důležitou věcí je nastavení ikony aplikace. Po přidání aplikace na plochu bude mít ikonu webu (screen webu).

Pomocí parametru apple-touch-icon si můžete tuto ikonu změnit:

&lt;link rel=&quot;apple-touch-icon&quot; href=&quot;/icon.png&quot; /&gt;

1	<link rel="apple-touch-icon" href="/icon.png" />

Základ aplikace

Celá aplikace může nyní vypadat například nějak takto:

&lt;html&gt;
	&lt;head&gt;
	&lt;meta 	name=&quot;viewport&quot; content=&quot;width=device-width; initial-scale=1.0; maximum-

scale=1.0; user-scalable=0;&quot; /&gt;
	&lt;meta 	name=&quot;apple-mobile-web-app-capable&quot; content=&quot;yes&quot; /&gt;

	&lt;title&gt;MyWebApp&lt;/title&gt;
	&lt;link rel=&quot;apple-touch-icon&quot; href=&quot;/icon.png&quot; /&gt;
	&lt;/head&gt;


	&lt;body&gt;

	Obsah aplikace

	&lt;/body&gt;
&lt;/html&gt;

<html>

<head>

scale=1.0; user-scalable=0;" />

<title>MyWebApp</title>

</head>

<body>

Obsah aplikace

</body>

</html>

V iPhone se zobrazí bez všech přebytečných lišt:

Přidání aplikace na plochu

Aby se aplikace tvářila jako skutečná aplikace, je nutné ji přidat na plochu telefonu. To uděláme velmi jednoduše. V

safari klikneme na ikonu + a zvolíme možnost Přidat na plochu:

Nyní se dostaneme k přidávacímu formuláři, kde se nám načte ikona, kterou jsme nastavili v hlavičce a zvolíme si

název aplikace:

Aplikace se bude zobrazovat na ploše a vypadat jako kterákoli jiná aplikace

Závěrem

Samozřejmě aby se aplikace tvářila jako výchozí aplikace bude nutné ji dále nastylovat, a doladit, pro tyto účely

můžete využít například tento jednoduchý javascriptový framework: http://webapp-net.com/

Comments are closed for this page

Patrik

08/06/2010

Zápisek jako na zavolanou. Právě se trápím s iphone verzí eshopu a tohle je příjemná pomoc.

Filip

08/06/2010

Poradíte jak odstranit tuto webovou aplikaci? Vytvořil jsem ji omylem a nelze mi ji přes i-tunes smazat.

Děkuju

zaachi

08/06/2010

Smazes ji normalne jako jakoukoli app.
Podrz na ni na plose prst az se ti objevi krizek pro smazani.