iPhone Safari Web开发经验

最新推荐文章于 2023-11-10 18:16:54 发布

weixin_30732825

最新推荐文章于 2023-11-10 18:16:54 发布

阅读量405

点赞数

文章标签： javascript 操作系统 php ViewUI

原文链接：http://www.cnblogs.com/TaoLiQ/archive/2011/05/13/2045162.html

版权

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的值：

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

6. 特定方向样式

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

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

因此第一步是增加一个默认的类名，如：

 
    1body.portrait p {
 
    2    color: red;
 
    3}
 
    4 
 
    5body.landscape p {
 
    6    color: blue;
 
    7}

然后添加样式：

 
    1body.portrait p {
 
    2    color: red;
 
    3}
 
    4 
 
    5body.landscape p {
 
    6    color: blue;
 
    7}

最后是Javascript，我们需要使用：

一个load事件监听器，设置最初的类名
一个orientationchange事件监听器
一个发生orientationchange事件时交换类名的函数

我们来看看事件监听器：

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

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

 
    1function 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事件，然后随手指移动更新方框的位置，如：

 
    01window.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 ：旋转的角度

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

 
    1window.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应用程序。

转载于:https://www.cnblogs.com/TaoLiQ/archive/2011/05/13/2045162.html