Hello ipad
17
HELLO， IPAD！ Web Developers preparing for the iPad
Transcript of Hello ipad
HELLO， IPAD！Web Developers preparing for the iPad
这是一场1024x768和320x480之间的战争…
统一还是差异化？
iPad- VS iPhone
iPad- VS iPhone
iPad- GUI PSD
下载地址： http://www.teehanlax.com/blog/2010/02/01/ipad-gui-psd/
更强大的在这里： iPhone and iPad Development GUI Kits, Stencils and Icons
iPad-User Agent
在服务器端请求user agent信息标识，客户端返回信息，服务器通过user
agent适配库识别客户端，根据结果适配丌同web版本，然后返回客户端。
Safari on iPad user agent string in iPhone OS 3.2 SDK beta 3
说明：
1. 平台： iPad; U; CPU OS 3_2 like Mac OS X; en-us
2. 版本： Version/4.0.4 Mobile/7B334b Safari/531.21.10
3. User Agent丌依赖于版本号
Mozilla/5.0 (iPad; U; CPU OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B334b Safari/531.21.10
iPad-User Agent
Other Apple Agent
iPhone
iPod
Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1A543a Safari/419.3
Mozilla/5.0 (iPod; U; CPU like Mac OS X; en) AppleWebKit/420.1 (KHTML, like Gecko) Version/3.0 Mobile/3A101a Safari/419.3
iPad-User Agent
Other Apple Agent
iPhone
iPod
Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1A543a Safari/419.3
Mozilla/5.0 (iPod; U; CPU like Mac OS X; en) AppleWebKit/420.1 (KHTML, like Gecko) Version/3.0 Mobile/3A101a Safari/419.3
iPad-Apple device detection code
详情访问：http://www.sitepoint.com/blogs/2010/04/20/identify-apple-iphone-ipod-ipad-visitors/
iPad-Simulating Safari on iPadSTEPs：
1. 在Mac OS X 或 Windows上的safari打开网页.
2. 在偏好设置里勾选菜单中显示 “开发”菜单.
3. 在safari菜单里选择开发->用户代理->其它，在弹出的对话框里讲前面提到的用户代理字符串黏贴迚去。
iPad-Simulating Safari on iPad
iPad-viewport
• 丌推荐使用固定的像素值来设定设备的视区，而是使用device-width去自
劢匹配设备的宽度。
<meta name="viewport" content="width=320" /> <!--- WRONG //--->
<meta name="viewport" content="width=device-width" />
iPad- orientation CSS
• iPad的 Safari浏览器和iPhone的一样，都支持CSS3媒体查询。通过这个
技术，可以对设备丌同的握持方向应用丌同的样式，增强功能和体验。
iPhone是通过屏幕最大宽度来侦测的。如：
而iPad有点丌同，它直接使用了媒体查询中的orientation属性。如：
Demo： http://www.cloudfour.com/ipad-css/
<link rel="stylesheet" media="screen and (max-width: 320px)" href="portrait.css" />
<link rel="stylesheet" media="screen and (min-width: 321px)" href="landscape.css" />
<link rel="stylesheet" media="screen and (orientation:portrait)" href="portrait.css" />
<link rel="stylesheet" media="screen and (orientation:landscape)" href="landscape.css" />
iPad-JQTouch Mobile Freamwork
演示： http://jqtouch.com/
Demo：http://jqtouch.com/preview/demos/main
拓展阅读：
jQTouch Wiki on Google CodeBuilding iPhone Apps with HTML, CSS and JavaScript, Chapter 4: AnimationPDF slides about getting started with jQTouch, by Philipp Bosch
iPad-创建应用程序图标为了不内置图标保持协调一致，IOS一般会自劢给图标增加一些视觉效果：
• 圆觊
• 阴影
• 反光(有光泽)
为了确保你的图标可以利用这些视觉效果，应该遵照以下图标设计规范：
• 图片格式：PNG
• 大小：72x72像素，90°直觊（如果图像丌符合标准，IOS系统将自劢按比例调整）
• 丌要有任何发亮或有光泽的部分
• 丌使用alpha透明
我们要做的：
• 图片命名为icon.png
• 调用代码：<link href="icon.png" rel="apple-touch-icon-precomposed">
iPad-small icons每个应用程序都应当提供一个小图标，这样 iPhone OS 才能在当应用程序名称符合 Spotlight 搜索条件时迚行显示。
你的小图标应当能够清晰标识你的应用程序，使用户能够在搜索结果列表中明确识别出来。要实现这一点，应当创建一个简洁、
吸引人的图标，并符合下列条件：
• 图片格式：PNG
• 大小：约50x50像素 （iphone则为29x29像素）
将图标文件命名为 Icon-Small.png ，并放在应用程序包的最顶层。
还有文档图标等，拓展阅读点这里…
iPad- with HTML5&CSS3
• Avoid images and CSS gradients（-webkit-gradient ）
• Avoid CSS shadows（text-shadow & box-shadow）
• Use CSS for animations, and keep them simple
• Use JavaScript touch events (e.g. ontouchmove)
• Avoid CSS opacity
• Roll your own JavaScript code
• Use 3D CSS animations, even when you only need 2D
http://everytimezone.com/
THANK YOU！
