移动端meta定义 & 触屏事件

移动端meta标签

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

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

效果：
强制让文档与设备的宽度保持 1:1 ；
文档最大的宽度比列是1.0（ initial-scale 初始刻度值和 maximum-scale 最大刻度值）；
user-scalable 定义用户是否可以手动缩放（ no 为不缩放），使页面固定设备上面的大小；

解决安卓浏览器放大问题：

body {
    min-width: 320px;
}

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

属性说明：
使设备浏览网页时对数字不启用电话功能（不同设备解释不同，iTouch 点击数字为存入联系人，iPhone 为拨打电话），忽略将页面中的数字识别为电话号码。
若需要启用电话功能将 telephone=yes 即可，若在页面上面有 Google Maps, iTunes 和 YouTube 的链接会在ios设备上打开相应的程序组件。

<meta name="apple-mobile-web-app-capable" content="yes" />

属性说明：
网站开启对 web app 程序的支持，允许全屏预览。
该 meta 可以看出内容为“苹果设备 web 应用程序 xx”，就是说该 meta 是专门定义 web 应用的。

<meta name="apple-mobile-web-app-status-bar-style" content="black" />

属性说明：
在 web app 应用下状态条（屏幕顶部条）的颜色；
默认值为 default（白色），可以定为 black（黑色）和 black-translucent（灰色半透明）；
注意：若值为“black-translucent”将会占据页面位置，浮在页面上方（会覆盖页面 20px 高度 iphone4 和 itouch4 的 Retina 屏幕为 40px ）。

---

移动端事件

手势事件
touchstart            //当手指接触屏幕时触发
touchmove           //当已经接触屏幕的手指开始移动后触发
touchend             //当手指离开屏幕时触发
touchcancel

触摸事件
gesturestart          //当两个手指接触屏幕时触发
gesturechange      //当两个手指接触屏幕后开始移动时触发
gestureend

检测触摸屏幕的手指何时改变方向       
orientationchange       

touch事件支持的相关属性
touches         
targetTouches       
changedTouches              
clientX　　　　// X coordinate of touch relative to the viewport (excludes scroll offset)       
clientY　　　　// Y coordinate of touch relative to the viewport (excludes scroll offset)       
screenX　　　 // Relative to the screen        
screenY 　　  // Relative to the screen       
pageX　　 　　// Relative to the full page (includes scrolling)     
pageY　　　　 // Relative to the full page (includes scrolling)     
target　　　　 // Node the touch event originated from      
identifier　　   // An identifying number, unique to each touch event

屏幕旋转事件   
onorientationchange    

// 判断屏幕是否旋转
function orientationChange() { 
    switch(window.orientation) { 
    　　case 0:  
            alert("肖像模式 0,screen-width: " + screen.width + "; screen-height:" + screen.height); 
            break; 
    　　case -90:  
            alert("左旋 -90,screen-width: " + screen.width + "; screen-height:" + screen.height); 
            break; 
    　　case 90:    
            alert("右旋 90,screen-width: " + screen.width + "; screen-height:" + screen.height); 
            break; 
    　　case 180:    
        　　alert("风景模式 180,screen-width: " + screen.width + "; screen-height:" + screen.height); 
        　　break; 
    };<br>};
// 添加事件监听 
addEventListener('load', function(){ 
    orientationChange(); 
    window.onorientationchange = orientationChange; 
});

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

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

双手指滑动事件

addEventListener('load'，function(){ window.onmousewheel = twoFingerScroll;}, 
     false       // 兼容各浏览器，表示在冒泡阶段调用事件处理程序 (true 捕获阶段
); 
function twoFingerScroll(ev) { 
    var delta =ev.wheelDelta/120;              //对 delta 值进行判断(比如正负) ，而后执行相应操作 
    return true; 
};

判断是否为 iPhone  

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

localStorage
例子 ：（注意数据名称  n  要用引号引起来）

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

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

<a href="tel:[phone]">打电话给我</a>
<a href="sms:12345654321">发短信</a>

或用于单元格：

<td onclick="location.href='tel:122'"></td>

自动大写与自动修正
要关闭这两项功能，可以通过autocapitalize 与autocorrect 这两个选项：

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