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     color: red;
3 }
4  
5 body.landscape p {
6     color: blue;
7 }

然后添加样式：

1 body.portrait p {
2     color: red;
3 }
4  
5 body.landscape p {
6     color: blue;
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     border: 1px 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  阅读(3214)  评论(0)  编辑  收藏  举报