Web application on an iPhone - styling it to look like native iPhone app [closed]_问答_开发者

Closed. This question needs to be more focused. It is not currently accepting answers.

开发者_开发知识库

Want to improve this question? Update the question so it focuses on one problem only by editing this post.

Closed 3 years ago.

Improve this question

I saw some web pages display diffrently on an iPod Touch (and iPhone) - they pretty much looked like the native iPhone apps.

Think this can be done with styles and, optionally, rendering diffrent HTML on the server side, based on the user agent from request.

So, how do I get this effect? And, also, is there any emulator of iPhone OS browser, so I could test my application before really launching it, to see if it even displays?

I'm currently working with the iUI dev team on the current CSS style for the project and I have to say I'm quite impressed by the power of the little browser. Most webkit functions are available to the end user including -webkit-gradients so that you can get most of the UI elements out of the way with zero images. While you can render the page differently based on the User-Agent string, I recommend stearing away from that as of this this as you can target the iPhone with a stylesheet parameter.

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

This allows you to use the same HTML markup, and change the way it looks for your iPhone.

For iPhone OS Emulators, Apple has you covered, over on the Windows Side it is Safari, and don't forget to change the useragent to iPhone in the dev options. I however use Chrome as it also uses the webkit engine, so most CSS is syntactically the same.

However, most people have an iTouch or iPhone if your doing this kind of dev work. Your best bet is to test on the 2G phone as it has the highest level of restriction (and slowest of all of CPUs). This gives you a worse case scerario that if you find acceptable, will only get better for the people with 3G and 3GSes.

Some great resources on the subject include:

Apple's Webapps Page

Apple's Developer Safari Page - Includes Link to iPhone Simulator (MAC ONLY).

ADC: Safari Reference Library

ADC SRL: Getting Started with Web Apps

ADC SRL: Getting Started with iPhone Web Apps

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

See here for info on Joe Hewitt's CSS and JavaScript for native-looking iPhone web apps: http://ajaxian.com/archives/iphone-native-looking-skin

To simulate the look and feel of a web page on iPhone, you can try this: http://www.testiphone.com/. (But of course, if you are serious about this, use a real iPhone or iPod Touch.)

You can use the jqtouch framework to make your web pages look and behave somewhat like a native iphone application. The author has a link to a demo on his homepage that you can check out with your iphone.

Regarding testing: Apple has an iphone sdk you can download if you've signed up to be an apple developer. But currently, I'm testing by just pointing my iphone to my dev server.

All the CSS/Javascript features you need are documented on the Apple Developer site.

Start here: https://developer.apple.com/safari/

Apple have a series of PDFs that describe what you need to do to customise for the iPhone and iPod.

Although you can download safari for Windows and Mac - it won't have the same resolution set as an iPhone or iPod.

Apple's iPhone SDK actually comes with an iPhone Simulator which allows you to test your pages on a real version of Mobile Safari. I believe the software is for Mac OS X only.