移动端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:12345654321">打电话给我</a>

<a href="sms:12345654321">发短信</a>

或用于单元格：

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

自动大写与自动修正

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

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