Html5支持iPhone触屏的脚本

移动平台的触屏JS代码

 

触屏设备可以绑定的事件分别是：ontouchstart,ontouchmove及ontouchend，分别对应了触屏开始、拖拽及完成触屏事件。

一般般的写法：

Js代码  

1. $("#u_obj_id").bind('touchstart', function (e) {  
2.     point = hasTouch ? e.originalEvent.touches[0] : e;  
3.     // point 代表触屏点  
4.     // some action  
5. })  

如此使得js代码支持移动设备的触屏事件。

如果对效果要求更高则可以使用 jquery-mobile 来实现。不过页面行为还需要在研究。

其他Iphone应用代码摘录：

禁止Safari浏览器下 旋转iPhone时自动调整文字的大小。当您旋转的iPhone，Safari浏览器调整文字的大小。 如果由於某种原因您希望阻止这种效果，只需使用下列CSS声明。

在- WebKit的文本尺寸的调整 是一个WebKit的只CSS属性，使您可以控制文本的调整。

Html代码  

1. html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {-webkit-text-size-adjust:none;}  

由於iPhone允许其用户在纵向和横向模式下浏览网页，您可能需要检测浏览者正以何种模式查看您的网页。

这个JavaScript函数可以方便地检测当前iPhone方向，将适用於特定的CSS类，您可以在css中定义它的风格。 请注意，在这个例子中，CSS类添加到ID： page_wrapper 。

Js代码  

1. window.onload=function initialLoad() {  
2.     updateOrientation();  
3. }  
4. function updateOrientation(){  
5.     var contentType = “show_”;  
6.     switch(window.orientation){  
7.         case 0:  
8.             contentType += “normal”;  
9.             break;  
10.         case -90:  
11.             contentType += “right”;  
12.             break;  
13.         case 90:  
14.             contentType += “left”;  
15.             break;  
16.         case 180:  
17.             contentType += “flipped”;  
18.             break;  
19.     }  
20.     document.getElementById(“page_wrapper”).setAttribute(“class”, contentType);  
21. }  

定义iPhone / iPod专用的CSS样式

嗅探器可以是有用的，但对许多原因，这并不是用来检测浏览器的最好做法。 如果您正在寻找一个更简洁的方式为iPhoen定义CSS样式，你应该使用以下代码。 它必须在常规的CSS文件粘贴。

Html代码  

1. @media screen and (max-device-width: 480px){  
2. /* All iPhone only CSS goes here */  
3. }   

自动隐藏工具栏

在小屏幕上，如iPhone屏幕上，工具栏有时是有用的，但也浪费了大量的空间。 如果您想让Safari浏览器工具栏默认情况下隐藏，使用以下JavaScript代码。 

Js代码  

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

特殊链接的使用

你还记得几年前“mailto”一类链接是非常普遍的？ 此前缀自动打开默认的电子邮件客户端的人。 iPhone已经推出了两款类似的前缀，tel和sms，这也许这将是对你有用。 你唯一要做执行这一点，是要粘贴以下的任何地方您的HTML网页。