iPhone Safari Web开发经验

1. userAgent

iPhone userAgent: 

Mozilla/5.0 (iPhone; U; CPU iPhone OS 3_0_1 like Mac OS X; zh-cn) AppleWebKit/528.18 (KHTML, like Gecko) Version/4.0 Mobile/7A400 Safari/528.16

ACCEPT:application/xml,application/xhtml+xml,text/html;q=0.9,text/plain;q=0.8,image/png,*/*;q=0.5

iPod touch userAgent

Mozilla/5.0 (iPod; U; CPU iPhone OS 3_0 like Mac OS X; zh-cn) AppleWebKit/528.18 (KHTML, like Gecko) Version/4.0 Mobile/7A341 Safari/528.16

ACCEPT:application/xml,application/xhtml+xml,text/html;q=0.9,text/plain;q=0.8,image/png,*/*;q=0.5

2. 检测iPhone(iPod touch)方法

判断UA中是否包含"iPhone"字符串,以PHP代码为例:

1 if (stristr($_SERVER['HTTP_USER_AGENT'], 'iPhone')) {iphone定制模块}

3. 如何为iPhone定制CSS

iPhone和PC最明显的区别就是iphone屏幕小,根据这一点可以利用link标签的media属性来限制CSS的应用范围。考虑到IE会忽略link标签的media特性,因此在定义CSS样式时首先要利用IE支持的条件注释来屏蔽IE。具体示例代码如下:

1 <!--[if !IE]>-->
2 <link rel="stylesheet" href="iphone-only.css" type="text/css"media="only screen and (max-device-width: 480px)" />
3 <!--<![endif]-->

通过max-device-width:480px(iphone躺下来的宽度)屏蔽PC;通过only screen屏蔽屏幕阅读设备。这样就可以做到将iphone-only中定义的CSS样式仅在iphone生效。

4. 如何理解iPhone的viewport

默认情况下,iPhone会像PC上的浏览器一样渲染页面(默认的页面宽度是980px,这个值是可以通过viewport的width属性设置的),然后同比缩放以适应iPhone的小屏幕(缩放比例可以通过minimum-scale和maxmum-scale进行设定),因此用户在iPhone看这个页面时感觉字体就比较小了,也比较模糊,必须要放大才能看得真切,这就是为啥我给联通定制的页面字那么小,因为我没有对viewport进行设置。下面代码演示了如何设置viewport:

1 <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0" />

viewport有如下几个属性:

  • width:设置viewport的宽度,即iphone最初模拟PC浏览器的宽度,之后iphone会这个宽度展现的页面同比缩放到iphone屏幕上。设置width=device-width后就不会再进行缩放了,因为宽度正好和iphone的宽度相同(前提是没有设置缩放比例)。
  • minimum-scale和maximum-scale:是控制用户允许设置的缩放比例的。
  • user-scalable:标识是否允许对页面进行缩放,取值有两个yes和no。设置为no则不允许进行页面缩放了。
  • initial-scale:设置 用户最初看到页面时的缩放比例。

5. 方向变化

iPhone支持重力感应,使用iphone无论横着还是纵着都可以正常浏览页面。利用iphone对事件的扩展可以捕获到这种“重力感应”。使用Javascript可以获得window.orientation的属性,它包含以下值:

  • 0 – 正常的纵向方向(开始按钮在下方)
  • -90 – 从纵向顺时针旋转后的水平方向(开始按钮在左方)
  • 90 – 从纵向逆时针旋转后的水平方向(开始按钮在右方)
  • 180 – 目前还不支持,但应该是纵向旋转(开始按钮在上方)    

当用户倾斜设备时,你可以使用orientationchange事件来执行一个动作,下面是一个简单的例子,无论何时当方向发生变化时弹出一个警告提示,显示window.orientation的值:

1 window.onorientationchange = function() {
2     alert(window.orientation);
3 }

6. 特定方向样式

有时你可能需要依靠方向使用样式格式化你的内容,需要三个简单的步骤:

  1. 在我们的标记中,给body单元添加一个类名(可以使用portrait和landscape)
  2. 在我们的样式表中,为body.portrait和body.landscape指定不同的内容样式,以及需要它的子元素
  3. 当方向变化时使用Javascript更新body单元的class属性的值

因此第一步是增加一个默认的类名,如:

1 body.portrait p {
2     colorred;
3 }
4  
5 body.landscape p {
6     colorblue;
7 }

然后添加样式:

1 body.portrait p {
2     colorred;
3 }
4  
5 body.landscape p {
6     colorblue;
7 }

最后是Javascript,我们需要使用:

  1.  一个load事件监听器,设置最初的类名
  2. 一个orientationchange事件监听器
  3. 一个发生orientationchange事件时交换类名的函数

我们来看看事件监听器:

1 window.addEventListener('load', setOrientation, false);
2 window.addEventListener('orientationchange', setOrientation, false);

下面是改变body单元上类名的setOrientation函数:

1 function setOrientation() {
2     var orient = Math.abs(window.orientation) === 90 ? 'landscape' :'portrait';
3     var cl = document.body.className;
4     cl = cl.replace(/portrait|landscape/, orient);
5     document.body.className = cl;
6 }

7. 圆角

你可以使用你熟悉的桌面浏览器中的圆角方法,如果你的目标只有Safari,那还可以使用-webkit-border-radius CSS扩展,对于Firefox 有一个类似的-moz-border-radius,但在IE和Opera中会显示为一个简单的方框。示例CSS样式如下:

1 .box {
2     -webkit-border-radius: 5px;
3     -moz-border-radius: 5px;
4     background#ddd;
5     border1px solid #aaa;
6 }

8. 触摸事件(touch)

使用iPhone时你可以使用手指代替鼠标,最酷的是支持多点触摸,在iPhone上鼠标事件被触摸事件替代了,包括:

  • touchstart
  • touchend
  • touchmove
  • touchcancel

当你发出这些事件时,事件监听器将会接收一个event对象,event对象有些重要的熟悉,如:

  • touches:触摸对象的集合,触摸屏幕的每个手指一个,touch对象有pageX和pageY属性,包含了在页面上触摸的坐标。
  • targetTouches:和touches类似,但它只登记对目标元素的触摸,而不是整个页面。

下面的例子是拖放的一个简单实现,我们在空白页面上放一个方框,然后进行拖动,你需要的做的就是订阅touchmove事件,然后随手指移动更新方框的位置,如:

01 window.addEventListener('load'function() {
02     var b = document.getElementById('box'),
03     xbox = b.offsetWidth / 2, // half the box width
04     ybox = b.offsetHeight / 2, // half the box height
05     bstyle = b.style; // cached access to the style object
06  
07     b.addEventListener('touchmove'function(event) {
08         event.preventDefault(); // the default behaviour is scrolling
09         bstyle.left = event.targetTouches[0].pageX - xbox + 'px';
10         bstyle.top = event.targetTouches[0].pageY - ybox + 'px';
11     }, false);
12 }, false);

9. 手势事件(guesture)

在iPhone上,手势是两个手指的行为:缩放(放大和缩小)和旋转。iPhone支持如下几种手势事件:

  • gesturestart
  • gestureend
  • gesturechange

在接下来的例子中我们将监听gesturechange事件,然后使用webkitTransform样式属性缩放和旋转一个div,像往常一样,事件监听器接收event对象参数,event对象包含以下属性:

  • event.scale : 不缩放时值为1,缩小时值小于1,放大时值大于1
  • event.rotate :旋转的角度

代码和前面的触摸—拖动代码非常类似:

1 window.addEventListener('load'function() {
2     var b = document.getElementById('box'),
3     bstyle = b.style;
4     b.addEventListener('gesturechange'function(event) {
5         event.preventDefault();
6         bstyle.webkitTransform = 'scale(' + event.scale + ') ' +
7         'rotate('+ event.rotation + 'deg)';
8     }, false);
9 }, false);

10. 特殊链接

当你浏览一个有电话号码的页面时,可以直接按号码就可以打出电话,这时电话号码自动变成链接,当然它们遵循电话号码的格式,但有时你可能要手工创建一个电话号码链接,这时你可以使用tel:前缀(URI模式),如:

1 <a href="tel:03545770051">海健</a>

如果是SMS文本,那可以使用sms:前缀,启动iPhone的文本消息应用程序:

1 <a href="sms:03545770051">短信</a>

iPhone上还有一些其它特殊功能的特殊链接,如:

  • 链接到iTunes Store可以启动iTunes,你可以在iTunes Store中通过搜索获得一个链接,然后在搜索结果上点击右键,选择“复制iTunes Store URL”,另一个办法是使用iTunes链接制作程序,它生成HTML标记,包括一个很好的标题和iTunes图形按钮。
  • 链接到Google Maps可以启动Maps应用程序。
  • YouTube链接将会启动本地YouTube应用程序,而不是YouTube站点。
  • 链接到电子邮件地址将会启动Mail应用程序。
posted @ 2011-05-13 09:49  ╰☆Everytime I try to flying  阅读(3216)  评论(0编辑  收藏  举报