【IT168 技术】如果你是一名Web开发人员，你可能会认为查看源代码和创建一个可以在iPhone上运行的站点或应用程序是最烦恼的。本文就介绍一些iPhone开发的技巧和忠告，如果你尚未购买iPhone真机，你可以使用模拟器进行练习。
1. 文档和iPhone模拟器
当Peter-Paul Koch在iPhone上玩Safari时他宣传“文档?没有”，至那以后情况开始逐渐改变，苹果公司现在已经将与iPhone有关的Web开发信息都放到Safari文档中了。
iPhone SDK(软件开发工具包)包含了一个iPhone模拟器，如果你已经拥有一部iPhone那这会很方便，当然如果你加入了iPhone大军，这是必不可少的了，如果想要使用它，必须先注册成为一名iPhone开发人员，并安装iPhone SDK，安装好后可以在/Developer/Platforms/iPhoneSimulator.platform/Developer/Applications找到iPhone模拟器。
2. 小屏幕CSS
iPhone和PC或Mac机最大的不同就是它的屏幕更小，如你的页面可以在桌面浏览器和屏幕阅读程序中运行，最简单的办法是为iPhone编写独立的样式表，下面是要使用到的标记：
<link
rel="stylesheet"
href="small-screen.css"
type="text/css"
media="only screen and (max-device-width: 480px)"
/>
<!--<![endif]-->
这里的link单元使用了media查询目标设备，最大宽度设为480像素，也就是iPhone在横向时可用的宽度，对于IE 5.5或更早的版本需要使用IE附加条件的注释，这些版本都缺乏media查询支持，将为iPhone载入样式表，我们还是以一个例子进行说明。
在例1中(链接：http://www.sitepoint.com/examples/iphone-development-12tips/small-screen-css.html)，我们将看到在iPhone浏览器上显示一个红框的页面，在其它浏览器上就显示蓝色。common.css文件包括了所有浏览器的样式，其内容如下：
background: blue;
color: white;
font-family: Verdana;
padding: 10px;
width: 300px;
height: 100px;
}
从上面的代码可以看出其定义了蓝色框。另一个small-screen.css文件是为所有小屏幕设备定义的样式，其内容如下：
background: red;
}
它定义了红色的背景。
如果你只愿意定义一个样式表，你可以使用@media块向主样式表中只添加iPhone样式表即可，如：
#test-block {
background: red;
}
}
在例2(链接：http://www.sitepoint.com/examples/iphone-development-12tips/small-screen-css-inline.html)中我们可以看到一个内联样式表，在它使用的样式表文件onestyleforall.css中，你可以看到在@media块中为红色背景进行了声明。
3. Meta元素可视区
默认情况下，iPhone上的Safari会象在大屏幕的桌面浏览器那样显示你的页面，宽度达到了980像素，然后缩小内容以适应iPhone的小屏幕，因此用户在iPhone看这个页面时感觉字体就比较小了，也比较模糊，必须要放大才能看得真切，对于一个普通的Web页面似乎可以接受，但对于一个常用的应用程序就没几个人能够受得了。
幸运的是可以使用特殊的Meta元素可视区进行纠正：
这个元素通知浏览器使用设备的宽度作为可视区的宽度，而不是默认的980像素了，我们可以看看两个不同的例子。
例3(链接：http://www.sitepoint.com/examples/iphone-development-12tips/no-viewport.html)显示了一个简单的段落元素，没有Meta元素可视区，字体有点模糊。在iPhone中运行的实际情况如下图所示。
图 1 无可视区的显示效果
例4(链接：http://www.sitepoint.com/examples/iphone-development-12tips/viewport.html)包括了一个可视区元素，现在设备宽度只有320像素，字体也比前一个例子更清晰了。在iPhone中运行的实际情况如下图所示。
图 2 有可视区的显示效果
另外，你还可以手动设置device-width的值，例如，假设你的博客页面的宽度是750像素，那么桌面屏幕非常好的大小就是800x600像素，例5(链接：http://www.sitepoint.com/examples/iphone-development-12tips/fixed750.html)显示了一个删减版本，如果你在iPhone中浏览它，你会看到980像素剩下的空间都填充了白色。
为了消除额外的空间，可以使用meta元素可视区将宽度设为780像素：
例6(链接：http://www.sitepoint.com/examples/iphone-development-12tips/fixed750-viewport.html)显示了meta元素可视区布局被固定后的效果。
Meta元素可视区的内容可以包括多个逗号分隔的值，如initial-scale – 用户最初看到页面时的放大级别，对于Web应用程序，一个常见的设置是：
这个元素设置宽度为设备的最大宽度，禁止用户放大和缩小。
4. 方向变化
你的页面和应用程序可以在两个方向上查看：纵向和横向。如果你的应用程序可以根据不同的方向进行变化，那将非常的酷。
使用Javascript可以获得window.orientation的属性，它包含以下值：
l 0 – 正常的纵向方向(开始按钮在下方)
l -90 – 从纵向顺时针旋转后的水平方向(开始按钮在左方)
l 90 – 从纵向逆时针旋转后的水平方向(开始按钮在右方)
l 180 – 目前还不支持，但应该是纵向旋转(开始按钮在上方)
当用户倾斜设备时，你可以使用orientationchange事件来执行一个动作，下面是一个简单的例子，无论何时当方向发生变化时弹出一个警告提示，显示window.orientation的值：
alert(window.orientation);
}
可以在例7(链接：http://www.sitepoint.com/examples/iphone-development-12tips/orientation-change.html)中看到它是如何工作的，旋转电话时就会看到警告，在iPhone模拟器中，在硬件菜单下可以看到旋转选项，如下图所示。
图 3 旋转设备时弹出警告信息
5. 特定方向样式
有时你可能需要依靠方向使用样式格式化你的内容，需要三个简单的步骤：
1. 在我们的标记中，给body单元添加一个类名(可以使用portrait和landscape)
2. 在我们的样式表中，为body.portrait和body.landscape指定不同的内容样式，以及需要它的子元素
3. 当方向变化时使用Javascript更新body单元的class属性的值
因此第一步是增加一个默认的类名，如：
color: red;
}
body.landscape p {
color: blue;
}
然后添加样式：
color: red;
}
body.landscape p {
color: blue;
}
最后是Javascript，我们需要使用：
1. 一个load事件监听器，设置最初的 类名
2. 一个orientationchange事件监听器
3. 一个发生orientationchange事件时交换类名的函数
我们来看看事件监听器：
window.addEventListener('load', setOrientation, false);
window.addEventListener('orientationchange', setOrientation, false);
下面是改变body单元上类名的setOrientation函数：
var orient = Math.abs(window.orientation) === 90 ? 'landscape' : 'portrait';
var cl = document.body.className;
cl = cl.replace(/portrait|landscape/, orient);
document.body.className = cl;
}
例8(链接：http://www.sitepoint.com/examples/iphone-development-12tips/orientation-styles.html)显示了这些特定方向的样式。使用iPhone浏览这个地址的效果如下图所示。
图 4 特定方向的样式
6. 隐藏工具栏
你可能已经注意到在iPhone上第一次载入某个页面时，URL工具栏是可见的，但往下滚动页面时，ULR工具栏就消失了。
图 5 有URL工具栏
如果你想让你的Web应用程序看起来更象一个本地iPhone应用程序，可能会想到在页面载入时移除掉工具栏，实现起来其实很简单，只需要使页面向下滚动1个像素即可，如：
setTimeout(scrollTo, 0, 0, 1);
}, false);
例子9(链接：http://www.sitepoint.com/examples/iphone-development-12tips/hide-toolbars.html)显示了这个行为。使用iPhone浏览这个地址的效果如下图所示。
图 6 无ULR工具栏
如果你也的页面太短不能滚动怎么办?这个时候我们需要添加一个额外的meta元素，以便让页面可以滚动，使用meta元素设置可视区的高度：
7. 圆角
你可以使用你熟悉的桌面浏览器中的圆角方法，如果你的目标只有Safari，那还可以使用-webkit-border-radius CSS扩展，对于Firefox 有一个类似的-moz-border-radius，但在IE和Opera中会显示为一个简单的方框。
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
background: #ddd;
border: 1px solid #aaa;
}
例10(链接：http://www.sitepoint.com/examples/iphone-development-12tips/rounded.html)显示了div元素上的圆角。使用iPhone浏览这个地址的效果如下图所示。
图 7 圆角效果
8. 触摸事件
当然，在使用iPhone时你可以使用手指代替鼠标，最酷的是支持多点触摸，在iPhone上鼠标事件被触摸事件替代了，包括：
l touchstart
l touchend
l touchmove
l touchcancel
当你发出这些事件时，事件监听器将会接收一个event对象，event对象有些重要的熟悉，如：
l touches – 触摸对象的集合，触摸屏幕的每个手指一个，touch对象有pageX和pageY属性，包含了在页面上触摸的坐标。
l targetTouches – 和touches类似，但它只登记对目标元素的触摸，而不是整个页面。
下面的例子是拖放的一个简单实现，我们在空白页面上放一个方框，然后进行拖动，你需要的做的就是订阅touchmove事件，然后随手指移动更新方框的位置，如：
var b = document.getElementById('box'),
xbox = b.offsetWidth / 2, // half the box width
ybox = b.offsetHeight / 2, // half the box height
bstyle = b.style; // cached access to the style object
b.addEventListener('touchmove', function(event) {
event.preventDefault(); // the default behaviour is scrolling
bstyle.left = event.targetTouches[0].pageX - xbox + 'px';
bstyle.top = event.targetTouches[0].pageY - ybox + 'px';
}, false);
}, false);
Touchmove事件监听器首先取消手指移动的默认行为，event.targetTouches集合包括一列每个手指所在的当前div元素的数据，我们只需要关心一个手指，因此我们使用event.targetTouches[0]，pageX向我们提供了手指的X坐标，根据这个值减去div宽度的一半，以便手指保留在方框中的中间。
在例11(链接：http://www.sitepoint.com/examples/iphone-development-12tips/drag.html)中我们将所有代码集中到一起了。
9. 手势
在iPhone上，手势是两个手指的行为：缩放(放大和缩小)和旋转。前面我们已经学习了touches和targetTouches事件包含了每个手指触摸设备的信息，使用这些事件也处理手势，如放大和平移，但还有更方便的gesture事件可用，你可以监听下面的事件：
l gesturestart
l gestureend
l gesturechange
在接下来的例子中我们将监听gesturechange事件，然后使用webkitTransform样式属性缩放和旋转一个div，像往常一样，事件监听器接收event对象参数，event对象包含以下属性：
l event.scale – 不缩放时值为1，缩小时值小于1，放大时值大于1
l event.rotate – 旋转的角度
代码和前面的触摸—拖动代码非常类似：
var b = document.getElementById('box'),
bstyle = b.style;
b.addEventListener('gesturechange', function(event) {
event.preventDefault();
bstyle.webkitTransform = 'scale(' + event.scale + ') ' +
'rotate('+ event.rotation + 'deg)';
}, false);
}, false);
例12(链接：http://www.sitepoint.com/examples/iphone-development-12tips/gesture.html)显示了运行这段代码的效果，缩放和旋转一个div。如果你在iPhone模拟器中浏览，按住选项键，将会显示两个灰色的点，表示两个手指，当你拖动鼠标时，可以将圆点移进和移出。
图 8 缩放和旋转
10. 特殊链接
当你浏览一个有电话号码的页面时，可以直接按号码就可以打出电话，这时电话号码自动变成链接，当然它们遵循电话号码的格式，但有时你可能要手工创建一个电话号码链接，这时你可以使用tel:前缀(URI模式)，如：
如果是SMS文本，那可以使用sms:前缀，启动iPhone的文本消息应用程序：
iPhone上还有一些其它特殊功能的特殊链接，如：
l 链接到iTunes Store可以启动iTunes，你可以在iTunes Store中通过搜索获得一个链接，然后在搜索结果上点击右键，选择“复制iTunes Store URL”，另一个办法是使用iTunes链接制作程序，它生成HTML标记，包括一个很好的标题和iTunes图形按钮。
l 链接到Google Maps可以启动Maps应用程序。
l YouTube链接将会启动本地YouTube应用程序，而不是YouTube站点。
l 链接到电子邮件地址将会启动Mail应用程序。
11. 首页图标
要想让访问者喜欢上你的站点，那你的首页就得做漂亮点，当某个用户将你的站点添加到首页屏幕时，iPhone将会使用你的页面屏幕截图作为首页图标，但也可以自己创建一个更好看的图标。
首先创建一个57x57像素的png文件apple-touch-icon.png，然后将它放到Web服务器的根目录下，iPhone将会自动添加光滑和圆角效果。
图 9 左边是原图，右边是iPhone自动处理后的首页图标
你也可以通过link元素灵活指定图标的位置和文件名，这允许你使用一个不同的Web服务器，如内容分发网络(CDN)，它会托管图标或跨多个站点共享相同的文件，为了指定图标的位置，可以采用下面的语法：
12. 调试：查看源代码和控制台
想要查看源代码?这在iPhone上有点不方便，幸运的是在iPhone上Safari支持书签，因此你可以使用书签添加丢失的功能，那该怎么做呢?
首先可以通过Javascript的document.documentElement.innerHTML访问到页面的源代码，在你的书签中只有问题就是该以什么方式来显示，例如，在一个新窗口中，好消息是这个Javascript可以通过书签来执行，iPhoneWebDev已经打包了许多书签，并且专为iPhone进行了优化，可以直接使用，如果你有一个需要的书签，只需要从Itunes同步到iPhone即可。
至于调试，iPhone包含了一个调试控制台，你可以进入Safari的设置程序中，选择开发人员，将调试控制台设为开启状态，之后就会显示在Safari浏览器URL工具栏的下方，它会显示页面的错误，你也可以使用控制台对象从Javascript编写调试消息，如：
console.error('Oops');
console.warning('Beware!');
非常高兴你阅读完本文，欢迎你进入令人兴奋和具有挑战的iPhone开发领域，我希望你马上动手实验。
