现在的位置: 首页 ＞iPad, 苹果＞正文
Hello，iPad！
2010年09月09日发布 分类： iPad, 苹果
本文作者: ⁄ 本文暂无评论
进入试用购买吧

Hello ipad

View more presentations from jeannewoo.

iPad vs iPhone
320×480是iPhone的屏幕分辨率，而1024×768是iPad的屏幕分辨率。凭着这组分辨率的变化以及外观的变化，很多人会觉得iPad只不过是“放大版”的iPhone。不但有着一致的制作工艺和外观，连“Home”键都一致的摆在了屏幕下方。

统一还是差异化？
有人说：我的站点支持iPhone，且自适应宽度，放到iPad上，照样没什么问题！兼容多平台!
是的，的确是没有什么问题。从iPhone、ipod touch到iPad，规格的增大，已经发生质的变化。iPad较之iPhone最明显的优势是其拥有一个大屏幕、大分辨率及高速的网络环境(wifi、 3G) , 有了这些优势，iPad自带的Safari完全有提供“桌面”web体验的能力，而iPad用户也期待这方面的体验。我们完全有理由期待在这个大尺寸的平 台上出现更高效、更强大的web app。如果你有一个针对小屏幕移动设备版本的网站，请不要直接将它自适应或拉升然后呈现给iPad用户，因为实在是太憋屈iPad了！
深入到两者的应用程序，例如日历程序，该应用程序在iPhone和iPad就有不一样的外观和体验。

iPhone版gmail无论从界面还是体验都得到很多果粉的赞赏，google还专门为iPad开发gmail新界面。新版的gmail完全为 iPad量身定制，充分利用iPad屏幕空间带给用户全新的界面体验。现在用户只需要通过iPad登陆mail.google.com就能看到如下图全新 的Gmail界面。

上图就是 iPad 优化版的Gmail 界面，由于iPad的屏幕很大，所以界面分成了左右两栏，将左栏为邮件列表界面和右栏为邮件内容界面显示在一起。邮件和预览框排列非常令人舒适，甚至还支 持全屏的编辑窗口。用户体验上，google一直都是走在了时代前沿，这点是否也值得我们去学习呢？

User Agent
在服务器端请求user agent信息标识，客户端返回信息，服务器通过user agent适配库识别客户端，根据结构适配不同web版本，然后返回到客户端。简单的说就是，许多网站都在服务器端通过检查浏览器的user agent字符串来确定是否为他们网站的移动版本。iPad的user agent字符串为：

Safari on iPad user agent string in IOS 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

说明：

  • 平台： iPad; U; CPU OS 3_2 like Mac OS X; en-us
  • 版本号：Version/4.0.4 Mobile/7B334b Safari/531.21.10
  • User Agent不依赖于版本号

需要注意的是，当iPad Safari发布新版本时，字符串中的版本号可能会有所变化，所以任何代码检查user agent字符串不应该依赖于版本号。

Apple 设备检测代码
这里提供一些javascript检测代码，用于检测iPhone、iPod、iPad设备。

  1. // Apple detection object
  2. var Apple = {};
  3. Apple.UA = navigator.userAgent;
  4. Apple.Device = false;
  5. Apple.Types = ["iPhone", "iPod", "iPad"];
  6. for (var d = 0; d < Apple.Types.length; d++) {
  7. var t = Apple.Types[d];
  8. Apple[t] = !!Apple.UA.match(new RegExp(t, ”i”));
  9. AppleApple.Device = Apple.Device || Apple[t];
  10. }
  11. // is this an Apple device?
  12. alert(
  13. “Apple device? ” + Apple.Device +
  14. “niPhone? ” + Apple.iPhone +
  15. “niPod? ” + Apple.iPod +
  16. “niPad? ” + Apple.iPad
  17. );

也可以使用类似的PHP代码在服务器端检测，具体方法可以查看How to Identify an Apple iPhone, iPod or iPad Visitor to Your Website。

创建web clip图标

web clip图标是什么概念呢？其实就是你在访问一个网站后，觉得还不错，将书签存到桌面，桌面上会出现一个该网站的应用程序图标，下一次打开就直接点击该图 标而不需要重新输入网址。如果我们没有提供给iOS一个应用程序图标的话，iOS会自动将页面截屏并缩放到相应尺寸生成图标。那么怎么创建一个应用程序图 标呢？

在iPhone专题的介绍中，我们已经知道，为了与内置图标保持协调一致，iOS会自动给图标添加一些视觉效果如圆角、阴影和玻璃反光效果。为了保 证你的图标可以利用这些视觉效果，应该提供一个尺寸为72×72像素，90度直角，无任何发亮或光泽的png格式图片(如果图片不符合标准尺寸，iOS会 自动按比例调整)。然后，将图片命名为icon.png, 通过<link href=”icon.png” rel=”apple-touch-icon-precomposed”>来进行调用。当然我们也做了一些测试，比如当你将该PNG图片命名为 apple-touch-icon.png放在根目录下，不需要任何语句，iOS也会直接获得web clip图标的功能。

Small icons

每个应用程序都应当提供一个小图标，这样 iPhone OS 才能在当应用程序名称符合 Spotlight 搜索条件时进行显示。
你的小图标应当能够清晰标识你的应用程序，使用户能够在搜索结果列表中明确识别出来。要实现这一点，应当创建一个简洁、吸引人的图标. 该图标为png格式，且大小约为50×50px(iphone为29×29px)，将该图片命名为Icon-Small.png,并放在应用程序包的最顶 层。如果你没有提供名为 Icon-Small.png 的图标，且你的应用程序包中也不包含早期版本的名为 Icon-Settings.png 的小图标的话，iPhone OS 将会将你的应用程序图标截取左下方一块显示在搜索结果和设置中。
如果你的应用程序包中已经包含了名为 Icon-Settings.png 的小图标，但没有包含名为 Icon-Small.png 的图标的话，iPhone OS 会在搜索结果中显示设置图标。不过，你应当更新你的应用程序包，使其仅包含 Icon-Small.png 文件。setting icon，iPhone和iPad一样都是29×29px。

Simulating Safari on iPad
如果你没有一台iPad作为测试机，你可以在桌面版的Safari上模拟iPad中的Safari。方法同iPhone的设置，详见PPT。
设置完成后，在Safari的菜单里选择开发->用户代理->其它,在弹出的对话框里将前面提到的user agent字符串黏贴进去。当你点击了”好”,页面会自动reload,以你所键入的iPad user agent去呈现。
如何确定页面已经按照新的user agent去呈现页面了呢？其实打开Safari菜单中的“显示web检查器”，从资源里就能看到请求的标头。

iPad-with html5 & css3
http://everytimezone.com/是一个为 iPad 设计的用来查时区的 HTML5 软件。它简单、到位，可以离线使用，并且速度极快。everytimezone.com 的作者Thomas Fuchs是资深 JavaScript 专家，也是Prototype 的核心开发者之一。他近日在其blog上分享了如何保证HTML5软件在iPad上飞速运行的7条秘诀。点击查看原文

1. 避免使用图片和CSS gradients(-webkit-gradient)

-webkit-gradient 的工作方法是构建位图，对于浏览器的渲染来说，这和从外部加载图片是完全一样的。Mobile Safari 显示图片速度之慢是出了名的，要解决这个问题，基本上只能不用图片和 -webkit-gradient。但是，可以使用HTML5的canvas标签来绘制渐变效果。

用 canvas 时可以在某种程度上复用 -webkit-gradient，比如这样：

  1. // WebKit CSS gradient
  2. -webkit-gradient(linear, left top, right top,
  3. from(#4b4c4d),
  4. color-stop(0.249, #4b4c4d),
  5. color-stop(0.25, #575b5c),
  6. color-stop(0.329, #575b5c),
  7. color-stop(0.33, #6b7071),
  8. color-stop(0.749, #6b7071),
  9. color-stop(0.75, #575b5c),
  10. color-stop(0.909, #575b5c),
  11. color-stop(0.91, #4b4c4d),
  12. to(#4b4c4d)
  13. );
  15. //  gradient
  16. var gradient = $(‘canvas’).getContext(“2d”).createLinearGradient(0,0,230,0);
  17. gradient.addColorStop(0,’#4b4c4d’);
  18. gradient.addColorStop(0.249,’#4b4c4d’);
  19. gradient.addColorStop(0.25,’#575b5c’);
  20. gradient.addColorStop(0.329,’#575b5c’);
  21. gradient.addColorStop(0.33,’#6b7071′);
  22. gradient.addColorStop(0.749,’#6b7071′);
  23. gradient.addColorStop(0.75,’#575b5c’);
  24. gradient.addColorStop(0.909,’#575b5c’);
  25. gradient.addColorStop(0.91,’#4b4c4d’);
  26. gradient.addColorStop(1,’#4b4c4d’);

2. 避免使用box-shadow和text-shadow

这也是速度变慢的另外一个重要的原因。也意味着我们要依赖canvas来实现发光和阴影的效果。

3.可以使用简单的CSS动画

在Safari上，只要使用-webkit-transform这个CSS属性就可以启动硬件加速了。硬件加速也有其局限性，例如同时跑的动画帧数就有限制，如果超过了这个限制，动画就会闪烁，有时还会出错，不过如果轻度使用的话，效果会非常棒！

4.使用javascript触控事件

触控事件例如ontouchmove, 触控事件是个好选择，因为onClick事件在iPad上用起来会有些延迟。在everytimezone.com/的源代码里有些小技巧，教你如何在使用触控事件的同时，也能够支持非触控设备上的浏览器。

  1. var supportsTouch = ’createTouch’ in document;
  3. element[supportsTouch ? 'ontouchmove' : 'onmousemove'] = function(event){
  4. var pageX = event.pageX;
  5. if (event.touches) pageX = event.touches[0].pageX;
  6. // …
  7. }

5.避免使用opacity

因为某些原因，使用opacity属性，有时会干扰硬件加速。如果你感到速度变慢，又看不出哪里出了问题的话，就检查一下有没有用到opacity吧…

6.拥有自己的javascript代码

万事无捷径，请手写适用于自己项目的javascript代码，因为当前的框架像Jquery也只为桌面浏览器做了优化。

7.使用3D CSS动画，即使你只需要2D的效果。

因为mobile Safari只提供了3D转化的硬件加速。使用-webkit-transform 时，记得用 translate3d(x,y,z) 语法，而不是 translate(x,y)。因为某种原因，后者无法支持硬件加速，至少在 iOS 3.x 上不行（不过在桌面版 Safari 里似乎没问题）。推荐大家看看Matteo Spinelli 做的 iScroll，里面有很多很棒的代码，也是演示如何为页面在移动版 WebKit 上的速度进行优化的好例子。）

固定链接: Hello，iPad！ | 实时信息 +复制链接

作者:

该日志由 shtion 于2010年09月09日发表在iPad, 苹果分类下，
原创文章转载请注明: Hello，iPad！ | 实时信息
关键字:
【上篇】
【下篇】

您可能还会对这些文章感兴趣！

  1. iOS设备清理垃圾通用教程(iPhone/iPad/iPod Touch)
  2. App Store美国区帐号获得免费美元iTunes Gift Card礼
  3. iExplorer：轻量级不需要iTunes在电脑和iPad/iPhone上
  4. iOS应用AirSlides可让演讲者用iPad做远程幻灯片演讲
  5. 平板电脑之Windows 8与iPad iOS5深度体验
  6. 搭载iOS 5 的 iPad2 vs Windows 8平板：实际试玩对比
  7. 三款 iPad（iOS）最佳日程管理同步软件
  8. [内幕] 香港丰泽电器员工倒卖500台iPad 2被捕全过程 [图文
    iPad换电池多少钱？（苹果提供iPad换电池服务）
    [内幕] 香港丰泽电器员工倒卖500台iPad 2被捕全过程 [图文]
    苹果iPad 2今日正式在国内上市，起售价仅3688元
    苹果iOS4.3固件开放下载+iOS4.3新增功能介绍

报歉!评论已关闭.

返回首页

Copyright © 2009-2012 实时信息  保留所有权利.  Theme by Robin   基于 WordPress 技术创建