3G web开发小结

（摘自-http://blog.csdn.net/kaosini/article/details/7586295?reload，http://mobile.51cto.com/iphone-276778.htm）

进入布局的讨论之前，先来赏析一下已有的iPhone应用：

Facebook iPhone Edition

Facebook的iPhone版。如果你已经习惯了在iPhone上使用过Facebook，第一次在PC上浏览这个页面会被它的“肥大”吓坏的。从这个页面我们能够得知，让页面自动适应iPhone屏幕的方法就是尽量使用百分比来定义宽度，特别是全页宽度一律用100%，如果是导航栏里面4个项目并排的就每个25%。

AppMarks

AppMarks可以说是一个应用程序的书签，当然也有人把它作为Safari的首页，那就相当于桌面了，因为你收藏的应用程序就在这个页面直接显示，以大图标的方式。AppMarks以前是可以直接在PC上浏览的，现在已经自动将非iPhone的请求重定向到介绍页了，不过这里有一个AppMarks Demo能在PC上看看。我们能够看得到图片是4个一行地排列的，共12个，然而横屏会怎样了？当然是变成6个一行，仍然能够在一屏内显示完，并且不会有不满行的图标。其实这是一个很tricky的做法，12是4和6的公倍数，因此虽然竖屏和横屏的显示方式不一样，但你不会觉得有什么缺陷。

Newsgator Mobile iPhone Edition

终于有一个ASP.NET写的iPhone应用了，其实和上面的Facebook看起来差不多，同样采用了宽度为100%的做法，同时页面上的元素要么向左对齐要么向右对齐。这听起来很废话，其实意思是，中间尽管留空，不要想把整个宽度为100%的块区都利用起来，说明性文字可以放左边，操作及视觉反馈放右边，这样无论屏幕怎么旋转都好看。如果中间塞满了内容，只会让Safari进行比例缩放操作，把页面整个缩小，这其实是不利于操作的。

GMail

这不是普通的GMail吗？怎样才能看到iPhone版？这就需要通过修改user-agent属性欺骗它了。iPhone上的Safari所用的user-agent如下所示：

Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1A543a Safari/419.3

使用Firefox的User Agent Switcher修改一下user-agent就行了，然后你就能看到iPhone上看到的GMail了。仍然和上面的网站一样，可点击区域是一大个宽度为100%的块区。

实际上，设计iPhone friendly的界面，在CSS的层面上来说一点也不难，甚至可以说是非常简单，因为基本上就是宽度为100%的块区，少数时候要用到按百分比划分的块区，但实际上我们也应该避免这种情况。为什么呢？别忘记了，iPhone的用户是没有鼠标的，他们必须通过手指来操作页面上的一切，因此可点击区域必须尽量大。

既然他们看不到鼠标指针，你也就不用考虑可点击区域必须是链接或者cursor: pointer，因为用户无法通过鼠标指针的改变来判断一个区域是否能点击。然而这同时也就引入了另一个问题，如何让用户了解一个区域能否点击呢？这时候你必须给出明确的视觉暗示，例如看起来是链接的文本，蓝色的文本有无下划线通常都挺诱惑人去点，这方面Facebook是一个例子。另一种做法是让界面看起来是菜单式的，好像AppsMarker和Newsgator那样，菜单右侧的符号让人挺熟悉不是吗？只要我点击这个菜单项，就会展开下一级菜单。最后一种做法就是基于用户已经熟悉的独创暗示来提示用户，习惯使用GMail的用户一看到邮件标题那个大大的蓝色区域，就知道点击是打开邮件，这是不需要任何指引的，最坏的情况下，用户不知道点击什么还是会点击邮件标题，之后他也就会用了。

webkit内核中的一些私有的meta标签，这些meta标签在开发webapp时起到非常重要的作用

• <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
• <meta content="yes" name="apple-mobile-web-app-capable" />
• <meta content="black" name="apple-mobile-web-app-status-bar-style" />
• <meta content="telephone=no" name="format-detection" />
• <meta content="email=no" name="format-detection" />

第一个meta标签表示：强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览；（和media Querys配合使用，如果忽略有时候会导致自适应网页失效）

第二个meta标签是iphone设备中的safari私有meta标签，它表示：允许全屏模式浏览；

第三个meta标签也是iphone的私有标签，它指定的iphone中safari顶端的状态条的样式

第四个meta标签表示：告诉设备忽略将页面中的数字识别为电话号码

第五个meta标签表示：去除Android平台中对邮箱地址的识别（在iOS中是不自动识别邮件地址的，但在Android平台，它会自动检测邮件地址）

一、 iPhone Friendly的Web应用程序之viewport

 viewport ，也就是可视区域。对于桌面浏览器 ，就是出去了所有工具栏、状态栏、滚动条等等之后用于看网页的区域 ，这是真正有效的区域。 

在桌面浏览器中，viewport的大小是与浏览器窗口大小直接相关的，窗口大了viewport自然就大，同时随着viewport的改变，页面布局可能也跟着变。例如width: 100%的页面宽度就总是和viewport宽度一致。

然而iPhone的Safari不是这样理解viewport的，它基于viewport呈现页面，然后用户缩放页面后viewport保持不变，仅仅是页面内容按比例缩放了。举个例子，在不设置viewport的情况下，默认viewport为宽度980（单位是像素），这时候页面的呈现出来的布局和在桌面短viewport宽度为980时呈现的结果一致，然而因为iPhone屏幕宽度为320，因此按比例缩小了。因此，一张宽度为320的图片，在默认viewport下会这样显示：图片按比例缩小了，

如传统Web 页面在 980宽度的桌面浏览器 viewport 中显示正常的话 ，iPhone 上显示也绝对正常。然而这对于 Web 应用程序来说则不是好事 ，因为我们需要按照 980 宽度来设计将来会以 320 宽度显示的页面 ，一个应该显示为 320*80 的元素 ，必须设计为 980*245 ，这多麻烦 ！因此我们需要改变 viewport。 

    实际上应该怎么做呢 ？我们有几个选择 ，因此先让我们看看到底我们能够设置哪些属性吧。可以操作的属性有 4 个 ： 

• width - viewport 的宽度   （范围从 200 到 10,000 ，默认为 980 像素 ） 
• height - viewport 的高度  （范围从 223 到 10,000 ） 
• initial-scale -  初始的缩放比例   （范围从>0到 10 ） 
• minimum-scale -  允许用户缩放到的最小比例 
• maximum-scale -  允许用户缩放到的最大比例 
• user-scalable -  用户是否可以手动缩放 

    这 6 个属性 ，我们可以设置其中的一个或者多个 ，iPhone 会根据你设置的属性自动推算其他属性值 ，而非直接采用默认值。这点很重要 ，在完全不设置的时候有默认 viewport ，在你设置一个属性后其它值是自动推算出来的 ，不再是默认的。 

    如果你把initial-scale=1 ，那么 width 和 height在竖屏时自动为320*356 （不是320*480 因为地址栏等都占据空间 ），横屏时自动为 480*208。 

    类似地 ，如果你仅仅设置了 width ，就会自动推算出initial-scale 以及height。例如你设置了 width=320 ，竖屏时 initial-scale 就是 1 ，横屏时则变成 1.5 了。 

    那么到底这些设置如何让 Safari 知道 ？其实很简单 ，就一个 meta ，形如 ： 

    <meta id="viewport" name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/> 

在设置了 initial-scale=1 之后 ，我们终于可以以 1:1 的比例进行页面设计了。 

     关于 viewport ，还有一个很重要的概念是 ：iphone 的 safari 浏览器完全没有滚动条 ，而且不是简单的     “隐藏滚动条” ，是根本没有这个功能。iphone 的 safari 浏览器实际上从一开始就完整显示了这个网页 ，然后用 viewport 查看其中的一部分。当你用手指拖动时 ，其实拖的不是页面 ，而是viewport。 

     浏览器行为的改变不止是滚动条 ，交互事件也跟普通桌面不一样

     使用适用于iPhone的单独的css文件

<link media="only screen and (max-device-width: 480px)" href="small-device.css" type= "text/css" rel="stylesheet" />

另一个做法是在服务器端就判断当前浏览器是否是iPhone上的Safari，从而选择返回哪个CSS文件，这可以通过user-agent进行判断，iPhone的如下：

Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1A543 Safari/419.3

 二、Safari对XHTML支持和注意事项

WebKit  是一种浏览器引擎 ，支撑着  iPhone  内的  Mobile Safari 浏览器背后的技术。WebKit是一个开源项目 ，它优先支持  HTML和CSS特性。实际上 ，WebKit  还支持尚未被其他浏览器采纳的一些诸如  HTML5 规范  CSS  样式。 

    iPhone 上的 Safari 支持的标准 ： 

• HTML 4.01
•  XHTML 1.0 
• CSS 2.1  以及部分  CSS 3 
• JavaScript (ES3) 
• DOM (Level 2) 
• AJAX (XMLHttpRequest) 

  虽然目前  iPhone WebApp 开发已经有诸如iUI、Canvas、Dashcode  等很好的开发工具 ，但了解掌握最基本的  html、javascript 、css  知识仍是十分必要的。

链接——iPhone对一下这样一些链接有特殊支持：

邮件——传统的mailto:地址iPhone将能自动使用内含的邮件程序处理，直接进入编写邮件的界面。完整的mailto:格式请参考RFC 2368。

电话——iPhone上的Safari会自动对看起来像是电话号码的数字串（包括已经加入连字符或括号格式化过的）添加电话链接，点击之后会询问用户是否想要拨打该号码。如果你不希望开启这个自动识别，可以将它关闭：

             <meta name="format-detection" content="telephone=no" /> 

如果你关闭自动识别后，又希望某些电话号码能够链接到iPhone的拨号功能，那么可以通过这样来声明电话链接：

              <a href="tel:13800138000">13800138000</a> 

 

     如何解决iOS 4.3版本中safari对页面中5位数字的自动识别和自动添加样式

新的iOS系统也就是4.3版本，升级后对safari造成了一个bug：即使你添加了如下的meta标签，safari仍然会对页面中的5位连续的数字进行自动识别，并且将其重新渲染样式，也就是说你的css对该标签是无效的。

 

 

我们可以用一个比较龌龊的办法来解决。比如说支付宝wap站点中显示金额的标签，我们都做了如下改写：

<button class="t-balance" style="background:none;padding:0;border:0;">95009.00</button>元

Google Maps——Google Maps的地图链接会自动调用内置的Google Maps客户端软件打开，而非在浏览器内浏览。链接可以是一个地点查询：

          <a href="http://maps.google.com/maps?q=cupertino">Cupertino</a> 

也可以是一个路线查询：

          <a href="http://maps.google.com/maps?daddr=San+Francisco,+CA&saddr=cupertino">Directions</a> 

YouTube——如果链接是指向YouTube视频地址的，将会自动调用内置的YouTube客户端打开播放。能够识别的YouTube地址格式为：

• http://www.youtube.com/watch?v=<video identifier> 
• http://www.youtube.com/v/<video identifier> 

其中<video identifier>替换为视频的id。

图片——由于用户浏览时有可能使用Wi-Fi，也有可能使用EDGE(GPRS)，因此你必须优化你的图片以确保即使是在使用EDGE访问你的网站的用户也能流畅的打开页面。因此你必须优化页面上的图片，尽量减少它们占用的传输带宽。另外Safari本身还对图片有如下的限制：

GIF（包括GIF动画）、PNG与TIFF解压后的体积小于2m。意思是，原图的长度乘以宽度再乘以每一个像素的位数，得出来的大小要小于2m。

JPEG解压后最大的体积是32m。解压体积大于2m的JPG会被进行二次抽样，最终显示给用户的是二次抽样后的结果。这使得Safari能够显示数码相机直接拍摄出来的照片，但显示时实际上是降低了精度的，以提高程序的执行效率。

为了尽量提高效率，例如你要将100*100的图片显示为10*10，就要在服务器端执行压缩操作，而不要直接用10*10的<img />来引用100*100的原始图片。

表单

• text, password, textarea 

在设计文本框的时候，必须记住用户点击后会出现软键盘，这时候可视区域就减少了：

另外在文本框中输入时，iPhone提供了自动大写与自动更正两项功能。自动大写的意思是，在输入开始的时候，以及在一个句号并空一个格后，自动会启用shift，输入一个字母后该shift自动消失。自动修正的意思是，iPhone会自动根据词库，包括自带的以及从你过往输入分析而来的，来对你的输入进行自动更正。我们都知道用手指点击那么小一个软键盘很容易误按旁边的键，这时候你可以不用忙于修正，只要iPhone提示的自动修正的词正是你想要的，你就可以按空格然后输入下一个词，iPhone会自动修正前面那个词。

要关闭这两项功能，可以通过autocapitalize与autocorrect这两个选项：

           <input type="text" autocapitalize="off" autocorrect="off" /> 

• select      必须留意到的是，iPhone上的<select />以不同的方式显示，以便于用户操作：

upload—— iPhone不支持任何的文件上传下载，因此<input type="upload" />总是会显示出来，并且是……disabled的！

多媒体内容—— iPhone上支持显示的多媒体内容，除了图片还包括QuickTime音频视频以及PDF。

如果需要创建视频，可以使用QuickTime Pro。如果你正在使用一台MacBook或者iMac，并且已经将QuickTime升级为QuickTime Pro，可以马上就试一试！你需要做的就是打开QuickTime Pro，然后开始录像，（接着请对着镜头傻笑3秒，或者做点别的），最后选择"Export for Web"。其中iPhone格式与iPhone (cellular)格式分别适用于Wi-Fi与EDGE环境，iPhone在播放时会自动根据当前的环境选择适合的流媒体文件进行下载与播放，另外poster是指影片播放之前在页面上显示的那一帧静态图片。导出后文件夹里ReadMe.html说明了如何将这些文件添加到XHTML中。

（事实上，导出结果中QuickTime控件引用的那个mov文件不包含任何视频数据，它只是一个引用，类似我们编程时所说的引用，用于指向真正的视频文件。不过这个引用指向的是多个视频文件，客户端根据当前的状态自动选择正确的视频文件来播放。）

 注意事项——为了让你的页面更好地受到 Safari 的支持。必须 ： 

• 声明正确的 doctype ； 
• 避免使用 frameset ； 
• 每一个独立的资源文件 ，HTML、CSS、JavaScript、以及非流媒体的其他多媒体文件 ，限制在 10m 之内 ； 
• 顶级入口的 JavaScript 执行时间限制为 5 秒 ，超时将自动终止 ； 
• JavaScript 分配内存上限为 10m ； 
• 同一时间最多在 Safari 内打开 8 个子窗口 （同时浏览的页面 ）。 
• Safari 本身还对图片有如下的限制 ： 
• GIF（包括 GIF 动画 ）、PNG 与 TIFF 解压后的体积小于 2m。意思是 ，原图的长度乘以宽度再乘以每一个像素的位数 ，得出来的大小要小于 2m ； 
• JPEG 解压后最大的体积是 32m。解压体积大于 2m 的 JPG 会被进行二次抽样 ，最终显示给用户的是二次抽样后的结果。显示时实际上是降低了精度的 ，以提高程序的执行效率。 

     可以看出 iPhone 对 HTML 的支持与桌面端的 Safari 是类似的 ，只是加入了更多扩展功能而已。使用  HTML  作为框架 ，适当嵌入 javascript  ，灵活运用  CSS ，即可实现你编写  iPhone  应用软件的快乐梦想。

三、 iPhone Safari 的特性 

 基于WebKit  的 iPhone Safari ，有一些与电脑上的 Safari ，特别是与  IE(Internet Explorer)不同之处有：

1、头<head>部分 ：

    ①<meta> 

    定义网页语言 ：（如果使用了扩展字符 ，请选用 gb18030 ） 

    <meta http-equiv="Content-Type " content="text/html; charset=gb2312 "/ > 

    定义用户界面 ，宽度为设备宽度 （等同于 320 像素 ），并不可缩放 ） 

    <meta name = "viewport " content = "width = device-width, user -scalable = no "/ > 

    定义显示的数字串 ，不被自动识别为电话号码。否则会自动转换为拨号超链接。 

    <meta name="format-detection" content="telephone=no" /> 

    定义开发者 

    <meta name="Author" contect="LSi "/ > 

    ②<link> 

    web app 可以像原生应用一样 ，在 home 界面里上添加一个快捷方式图标 

    <link rel="apple -touch-icon" href="icon.png" /> 

    这是针对单个页面的 ，如果你把图片命名为 “apple-touch-icon.png” ，放在网站的某个目录里面 ，该目录下所有页面都会获得添加图标的功能…… 

    图标的要求是尺寸 57×57 ，png 格式 ，不用画蛇添足的去做圆角渐变或玻璃反光效果 ，iphone系统会把图片自动裁剪和渲染成统一的风格…… 

    ③<title> 

    定义可被搜索的网页关键词 

    <title>择吉老黄历</title> 

    ④<script> 

    定义外部 javascript  文件 

    <script type="text/javascript" src="xxxx.js "></script> 

    ⑤<style> 

    定义所用的 CSS （层叠样式表 Cascading Style Sheet ） 

    <style type="text/css">……</style> 

    iPhone Safari 支持的 CSS3 的很多新特性 

    2、JavaScript 部分 

<script Language="JavaScript ">……</script> 

当外部 js  文件与内嵌 javascript  段存在变量或函数冲突时 ，按加载顺序 ，以最后的定义为准。 

Javascript  段亦可放在  <body> 段之后 ，可实现先加载  <body> ，  后加载  <javscript>。但必须注意 ，由于是顺序加载 ，<body> 段不能引用后面的变量或函数 ，但可以向后调用。

3.一个案例：

程序界面部分，程序的显示、交互一般都放到这个段

<body style="margin: 0; font -size: 12pt; font -family: Trebuchet MS; color: #FFFFFF" ontouchmove="event.preventDefault()" onload="tImg.style.visibility='visible' " > 
      <img id="tImg" class="sImg" src="TestFile.png" onerror="pError()" /> 
      <table id="layerT" style=" position  absolute; width: 320px; height: 480px ">
            <tr><th id="TitleBar" colspan="2" height="48px"></th></tr>
            <script Language="JavaScript"> 
                  for (i=0; i<=pMax; i++)
                  { 
                     document.write("<tr ontouchend ='DispImg(" + i +")' style='border-top:1px solid #CCC'><td id='M" + i + "'></td><td width='12'></td></tr>"); 
                  } 
</script> 
            <tr><td id="ToolBar" colspan="2" height="42px"></td></tr> 
       </table> 
       <div id="layerH" style="position: absolute; width: 320px; height: 480px; left: 0px; top:0px; background -color: RGBA(0,0,0,0.3); z-index: 1; visibility:hidden">
            <div id="layerM" style=" -webkit-border-radius:12px; border:2px solid #FFF;-webkit-box-shadow: 0px 2px 4px #888; 
               position: absolute; left: 24px; top: 106px; 
               width: 256px; height: 268px; padding -left: 8px; padding-right: 8px; 
               color: #FFFFFF; text-shadow: 1px 1px 1px #000; text -align: center; 
               background-color: RGBA(32,48,96,0.9); 
               background-image:url('BG-Msg.png'); background-repeat:no-repeat; 
               z-index: 1; visibility: hidden; "> 
          <p><span style="font -size: 16pt; font -weight: bold">使用说明</span></p>
          <hr noshade size="1"> 
          <div id="HelpText" style="height: 120px">说明文字</div> 
          <hr noshade size="1">
          <form name="formV" method="POST"> 
               <input type="button" class="sButton" value="确认" name="B1" onclick=" layerH.style.visibility='hidden'" / >
          </form> 
          </div> 
      </div> 
</body>

  简要说明 ： 

ontouchmove="event.preventDefault()"           //锁定 viewport ，任何屏幕操作不移动用户界面 （弹出键盘除外 ）。 
οnlοad="tImg.style.visibility='visible'"       // <body>加载完成后 ，显示该图片。 
οnerrοr="pError()"                             //图片加载错误时 ，执行错误处理过程。（特别说明 ：在IE中 ，只有图片文件不存在 ，才返回错误 ；而在  iPhone Safari  中 ，图片文件不存在 ，或格式不正确 ，均返回错误。因此这种方式 ，只能用来判断图片文件是否存在。）
position: absolute; width: 320px; height: 480px     //设定该容器绝对定位位置 ，正好为完全的 viewport尺寸。（特别说明 ：除非参数值为 0 ，建议数值参数均带上单位。）
id="TitleBar"                                       //定义单元标志 ，其后可以使用 ：TitleBar .innerText = "标题文字"  或TitleBar .innerHTML = "<b>标题文字</b>"  来重置该单元内容。不同的是 innerText 是纯文本内容 ，而 innerHTML 可以使用规范的 html 格式。
width: 256px; height: 268px; padding -left: 8px; padding-right: 8px;    //由于设定了容器 padding 值 ，所以 ，该容器的宽度实际是 ：256 + 8 + 8 = 272 px。 
z-index: 1 //设定该层的顺序。层号越大越靠上 ；若有相同层号 ，按程序中定义顺序 ，后边的靠上 ；设定为  -1 会不显示 ，但为显示方便 ，避免层设定混乱 ，隐藏某层一般使用 ：visibility: hidden。

三、 iPhone Safari 的交互事件（javascript部分）

相对于  IE ，iPhone Safari  增加了一些屏幕操作的事件 ： 

• Touchstart        //当手指接触屏幕时触发 
• Touchmove         //当已经接触屏幕的手指开始移动后触发 
• Touchend          //当手指离开屏幕时触发 
• touchcancel 
• gesturestart      //当两个手指接触屏幕时触发 
• gesturechange     //当两个手指接触屏幕后开始移动时触发  gestureend   

    iPhone Safari 浏览器行为的改变不止是滚动条 ，交互事件也跟普通桌面不一样 ：所有 hover 动作 ，还有 mouseover ，都不存在。 
    如：点击页面元素之后发生的事情很复杂 ：比如当你用单指按住可点击元素 ，然后放开 ，首先触发的event 居然是 mousemove ！  接下来如果元素内容不变 ，会陆续触发  mousedown ，mouseup ，click，如果内容改变 ，就不会再触发任何事件。
    如果按住元素之后移动手指 ，当然就不要指望会触发 mousemove 了 ，啥事情都没有 ，不过停下的时候 ，会触发 onscroll   （因为你刚才移动了 viewport 嘛…… ）
    如果你用两个手指做缩放的动作 ，啥事件都不会有啦 ，但是如果你用两个手指在屏幕上一起移动 ，而且所在的位置是一个本来有滚动条的页面元素(比如 iframe 罢) ，会触发一个叫 mousewheel 的事件 （但是别指望 iframe 本身的内容会滚动 ）,  停止移动时同样触发 onscroll。 

    交互案例：

    1.完成某一元素的移动 ，或者检测手指在屏幕上的划动

onTouchstart="startX = event.touches[0].pageX; endX = event.touches[0].pageX " 
onTouchmove="endX = event.touches[0].pageX; pMove() " 
onTouchend="pClick() " 

    2. 对于某一可点击表格元素使用 click  和  onTouchend 均可完成点击触发事件的功能 ，二者的区别在于 ：ontouchend  不可用于  IE ，并且不会出现点击后元素的外观变化 （例如被点击单元格会高亮显示 ），这也许正是你所需要的。当然 ，被点击元素的外观变化 ，可以使用样式来设定 ：
    -webkit-tap -highlight-color: 颜色 
    另外 ，在 iPhone Safari  上 ，onclick 会有残留。例如点击后显示某一个层 ，如果该层在此位置也定义了可触发 ，则可能会也触发这个事件。 

    3.  屏幕旋转事件 ：onorientationchange ，这当然是  iPhone 所特有的了。添加屏幕旋转事件侦听 ，可随时发现屏幕旋转状态 （左旋、右旋还是没旋 ）

 function orientationChange() { 
            switch(window.orientation) 
            { 
           　　 case 0      alert(  “没旋 ”); break; 
           　　 case -90  alert(    “左旋 ”); break;
           　　 case 90    alert(   “右旋 ”); break; 
            } 
} 
addEventListener('load', function(){ 
         orientationChange(); 
         window.onorientationchange = orientationChange;
} ); 

4. 隐藏地址栏  &  处理事件的时候 ，防止滚动条出现

addEventListener('load', function(){ 
         setTimeout(function(){ window.scrollTo(0, 1); }, 100);
 } ); 

5.双手指滑动事件 ：

 addEventListener('load', function(){ 
      window.onmousewheel = twoFingerScroll;}, false);
      function twoFingerScroll(ev) { 
         var delta =ev.wheelDelta/120;              //对 delta 值进行判断(比如正负) ，而后执行相应操作 
         return true; 
} 

6.  判断是否为 iPhone

 function isAppleMobile() { 
         return ((navigator.platform.indexOf('iPhone') != -1)
 } 

7. localStorage 
    众所周知 ，为了保护  Web  用户的安全性 ，HTML 程序禁止向客户端写入任何文件。这一定程度上限定了一些WebApp的功能范围。IE可以变通使用Microsoft的FileSystemObject 来写文件 ，这在iPhone 上则无法实现。如果用户想保存一些数据 ，比如某些设定或用户登录数据 ，待程序下次执行时可以直接读取 ，怎么办呢 ？ 
    ”使用Cookie!"  相信很多朋友会这样回答。是的 ，可以使用Cookie，但是 ，使用 Cookie  有很多缺陷 ，除了读写比较复杂外 ，还有 ：用户没有打开  Cookie  怎么办 ？期间用户删除了Cookie  怎么办 ？其实，iPhone Safari有一项符合HTML5规范的扩展功能：localStorage。它使得开发者的这种需求变得十分简单。
    例子 ：（注意数据名称  n  要用引号引起来 ） 

var v = localStorage.getItem('n') ? localStorage.getItem('n') : "";   //如果名称是n的数据存在 ，则将其读出 ，赋予变量 v 。 
    localStorage.setItem('n', v);    //写入名称为 n、值为 v 的数据 
    localStorage.removeItem('n');   //删除名称为 n 的数据