Your SlideShare is downloading. ×
0
Hello ipad
Hello ipad
Hello ipad
Hello ipad
Hello ipad
Hello ipad
Hello ipad
Hello ipad
Hello ipad
Hello ipad
Hello ipad
Hello ipad
Hello ipad
Hello ipad
Hello ipad
Hello ipad
Hello ipad
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Hello ipad

50,292

Published on

1 Comment
11 Likes
Statistics
Notes
  • 320×480是iPhone的屏幕分辨率,而1024×768是iPad的屏幕分辨率。凭着这组分辨率的变化以及外观的变化,很多人会觉得iPad只不过是“放大版”的iPhone。不但有着一致的制作工艺和外观,连“Home”键都一致的摆在了屏幕下方。
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
50,292
On Slideshare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
89
Comments
1
Likes
11
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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

×