IPAD网页制作与开发技巧

 

首先了解iPad开发的局限性

 

1、在iPad上使用Safari浏览普通网站网页的时候，网页因为太大而导致需要手动放大缩小或者滑动，虽然这种滑动行为在iPad上市之初的各种宣传中被津津乐道，但时间久了我们还是会发现这样做并不方便，给用户带来的感受并不十分好。

 

2、不支持Flash

 

在没有越狱的iPad Safari中，网站的Flash都是无法显示的，但可以通过第三方软件或插件或者浏览器来解决，不过，即使不能显示Flash，你一样能够用HTML5和CSS3实现同样的效果。

 

3、没有鼠标光标

 

这意味着鼠标属性，例如鼠标悬停属性是不可能有的。

 

你或许可以为这个找到一些变通的办法，但是到你的用户那里这些该如何工作将会是困难的事。

 

4、滚动条不能按照预期那样起作用

 

滚动条不能显示包含了充满过多分区的内容。框架也存在高度和宽度的问题。另外，滚动过程中需要两个手指的手势。（我们将在下文中进行充分的讨论）

 

5、不支持CSS固定布局

 

HTML 元素 position:fixed CSS属性不能正确显示，常常会使得页面停留在第一屏，无法向下翻页、放大缩小。

 

设置viewpoint

 

viewpoint，可以理解为：视窗、可视区域，相对于iPad硬件限定的窗口来定义的。iPad窗口大小不可改变,但viewpoint视窗大小可以设置调整。

 

如果在iPhone开发中指定了视窗标签设置, 在iPad开发中必须进行必要的校正。例如：

 

在iPhone中，我们会用下述代码的方式指定屏幕宽度

 

 

而在iPad中，则必须用device-width替代具体的宽度像素数。

 

 

我们在设置宽度的同时可以设置可缩放的比例范围

 

 

用 textareas 取代 contenteditable

 

iPhone和iPad浏览器不支持contenteditable元素。

 

默认隐藏工具栏

 

iPhone的浏览器工具栏会在页面最顶端，卷动网页后才隐藏。这样在加载网页完成后显得很浪费空间，特别是横向屏幕时。我们可以让它自动卷动上去。

 

 

iPad图标

 

iPad开发完成后，会体现图标的地方主要有：

 

iPad桌面，不大于72×72的png格式图标；

 

iPhone桌面，不大于57×57的png格式图标，在Xcode中的资源部分添加，并在xxxInfo.plist中设置Icon file属性为添加的图片资源名称。

 

图标文件不需要做圆角和反光，iPad/iPhone自己会完成。

 

App Store中软件简介中显示的缩略图，在打包生成zip文件的根目录放置的文件名为iTunesArtwork的jpg图片，大小要求在512×512以下 如果你的用户将你的网站添加到home screen，iPhone会使用网站的缩略图作为图标。然而你可以提供一个自己设计的图标，这样当然更好。图片是57×57大小，png格式。不需要自己做圆角和反光，系统会自动完成这些工作。然后将下面这条加入head中：

 

 

用iScroll控制你的触摸滚动

 

这是一个简单且最有用的源码，能够帮助你控制你的网络应用程序。由Matteo Spinelli创作，iScorll是一个开发项目，因为网络浏览器引擎Webkit工具套件（用于iPhone,iPod,iPad,Android 以及Palm上）不提供本地方式去滚动文章内部一个固定的高度/宽度元素。

 

这种不幸的情况防止任何Web应用程序有一个头和/或页脚的 position:absolute CSS属性，并滚动中心区域的内容。

 

iScroll代码非常易于使用。如果你喜欢iScroll，你需要这些类似的jQuery插件：jQuery Swipe和JQTouch

---