Application Web sur un iPhone - le stylisant pour ressembler à l'application iPhone native

J'ai vu certaines pages web s'afficher différemment sur un iPod Touch (et un iPhone) - elles ressemblaient à peu près aux applications iPhone natives. Pensez que cela peut être fait avec des styles et, éventuellement, en rendant différents HTML du côté du serveur, en fonction de l'agent utilisateur à partir de la requête.Application Web sur un iPhone - le stylisant pour ressembler à l'application iPhone native

Alors, comment obtenir cet effet? Et, aussi, y at-il un émulateur de navigateur iPhone OS, afin que je puisse tester mon application avant de vraiment le lancer, pour voir si elle s'affiche même?

Source

2009-11-02 kender

iui est une bonne solution, mais je suggère également http://www.jqtouch.com/ qui est basé sur jquery. C'est de plus en plus radiply. Et vous pouvez également utiliser le groupe Google http://groups.google.com/group/iphonewebdev

Source

2009-11-02 18:52:35

certainement la meilleure chose à utiliser. –

bonne chose, merci. J'utiliserai jQuery dans ce projet, donc je vais essayer. – kender

Je n'ai jamais vu ça auparavant; Je vais certainement vérifier cela. – tahdhaze09

Voir ici pour plus d'informations sur CSS Joe Hewitt et JavaScript pour les applications Web natives iPhone avenir: http://ajaxian.com/archives/iphone-native-looking-skin

Pour simuler l'apparence d'une page web sur l'iPhone, vous pouvez essayer ceci: http://www.testiphone.com/. (Mais bien sûr, si vous êtes sérieux à ce sujet, utilisez un vrai iPhone ou iPod Touch.)

Source

2009-11-02 18:42:27

Je voudrais utiliser le site testiphone à l'aide d'un navigateur Webkit depuis le navigateur iPhone est basé sur Webkit. Cela devrait vous donner l'approximation la plus proche du navigateur iPhone. –

http://code.google.com/p/iui/

Source

2009-11-02 18:44:51 tahdhaze09

Toutes les CSS/Javascript fonctionnalités indispensables sont documentées sur le site Apple Developer.

Commencez ici: http://developer.apple.com/safari/

Apple ont une série de fichiers PDF qui décrivent ce que vous devez faire pour personnaliser pour l'iPhone et l'iPod.

Bien que vous puissiez télécharger un safari pour Windows et Mac, la résolution ne sera pas la même que celle d'un iPhone ou d'un iPod.

Source

2009-11-02 18:46:35 daf

Vous pouvez utiliser le cadre jqtouch pour que vos pages Web s'affichent et se comportent un peu comme une application iPhone native. L'auteur a un lien vers une démo sur sa page d'accueil que vous pouvez consulter avec votre iPhone. En ce qui concerne les tests: Apple a un iphone sdk que vous pouvez télécharger si vous vous êtes inscrit comme développeur Apple. Mais actuellement, je teste simplement en pointant mon iphone sur mon serveur de dev.

Source

2009-11-02 18:55:23

c'est le problème si je n'ai pas réellement l'iPhone :) – kender

Vous seriez bien avisé d'en obtenir un si vous allez faire des sites web iPhone. Le simulateur est génial et tout, mais il est beaucoup plus rapide qu'un iPhone réel (et a parfois des problèmes différents de la réalité). – ceejayoz

Je suis sûr que j'en aurai un (probablement iPod touch, car je n'ai pas besoin d'un autre téléphone). L'application web n'est pas seulement une application iPhone, c'est juste une idée pour la rendre similaire à une application pour les utilisateurs d'iPhone. Par conséquent, avant de lancer en direct je voudrais obtenir le périphérique réel, mais avant c'est juste une autre dépense que je peux éviter :) – kender

Le SDK iPhone d'Apple est livré avec un simulateur iPhone qui vous permet de tester vos pages sur une version réelle de Mobile Safari. Je crois que le logiciel est pour Mac OS X seulement.

OS X 10.5 iPhone SDK Download

Vous devez vous authentifier avec vos iTunes lettres de créance pour obtenir le téléchargement.

Source

2009-11-02 19:45:07 gkj4444

si vous avez le code X et Dashcode installé, puis le simulateur de l'iPhone est avec elle. Je suis paresseux je viens de commencer et de vide projet pour l'iPhone dans Dashcode et le lancer et le simulateur apparaît. – PurplePilot

Si vous possédez un Mac, vous devriez vraiment essayer Dashcode (qui fait partie du SDK iPhone).

Source

2009-11-02 20:54:13 Linas

Je travaille actuellement avec l'équipe de développement d'iUI sur le style CSS actuel pour le projet et je dois dire que je suis assez impressionné par la puissance du petit broswer. La plupart des fonctions de webkit sont disponibles pour l'utilisateur final, y compris -webkit-gradients, de sorte que vous pouvez supprimer la plupart des éléments de l'interface utilisateur avec zéro image. Bien que vous puissiez rendre la page différemment en fonction de la chaîne User-Agent, je recommande de ne pas en faire autant car vous pouvez cibler l'iPhone avec un paramètre de feuille de style.

<link media="only screen and (max-device-width: 480px)" href="iPhone.css" type="text/css" rel="stylesheet" />

Cela vous permet d'utiliser le même balisage HTML et de changer la façon dont il se présente pour votre iPhone.

Pour iPhone OS Emulators, apple has you covered, sur le côté Windows, c'est Safari, et n'oubliez pas de changer le useragent pour iPhone dans les options de dev. J'utilise cependant Chrome car il utilise aussi le moteur webkit, donc la plupart des CSS sont syntaxiquement les mêmes.

Cependant, la plupart des gens ont un iTouch ou un iPhone si vous faites ce genre de dev travail. Votre meilleur pari est de tester sur le téléphone 2G car il a le plus haut niveau de restriction (et le plus lent de tous les processeurs). Cela vous donne un casse-tête sorinaro que si vous trouvez acceptable, ne fera que s'améliorer pour les personnes avec 3G et 3GSes.

Quelques grandes ressources sur le sujet comprennent:

Apple's Webapps Page

Apple's Developer Safari Page - Comprend un lien vers iPhone Simulator (MAC uniquement).

ADC: Safari Reference Library

ADC SRL: Getting Started with Web Apps

ADC SRL: Getting Started with iPhone Web Apps

MUST READ: iPhone Human Interface Guidelines for Web Applications - Metrics, Layout Guidelines, and Tips

Submit your WebApp

Source

2009-11-03 05:36:44