无线开发的积累

meta标签

这些meta标签在开发无线页面尤其是webAPP时作用很大

<meta content="yes" name="apple-mobile-web-app-capable"/><meta content="yes" name="apple-touch-fullscreen"/>    safari私有的标签，表示允许全屏<meta content="telephone=no,email=no" name="format-detection"/>    忽略将页面的数字识别为电话号码<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"/>    强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0    并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览<meta name="data-spm" content="a.b"> 埋点

PS：content里的属性要用逗号+空格来分开

link标签(主要针对iOS)

保存网页到桌面上时使用的图标，没有设置则显示网页截图

<link rel="apple-touch-icon-precomposed" href="../icon_114.png" /><link rel="apple-touch-icon-precomposed" sizes="72x72" href="../_icon_72.png" /><link rel="apple-touch-icon-precomposed" sizes="114x114" href="../icon_114.png" />

启动画面的图片，没有设置就显示白屏

<link rel="apple-touch-startup-image" href="../start.png" />

其中还有个专门针对iOS的meta标签

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

用来设置顶部的bar(状态栏)颜色,Apple有个官方的说明 iOS的meta标签
估计已经有人翻译了，不过没找到中文版

transition闪屏

• css3 3D加速
  -webkit-transform-style: preserve-3d;

• 通过backface-visibility 隐藏
  -webkit-backface-visibility: hidden;

iOS下的localStorage

safari有隐私模式，但是 ’localStorage’ in window 依然返回true,就需要使用try catch来捕获错误

try{     if('localStorage' in window){     //localstorage可用    }else{     //localstorage不可用    }}catch(e){    // 隐私模式localstorage不可用}

部分android机型在滑动时候会停止js css的执行

答案来自这里 stackoverflow

function touchHandlerDummy(e){    e.preventDefault();    return false;}document.addEventListener("touchstart", touchHandlerDummy, false);document.addEventListener("touchmove", touchHandlerDummy, false);document.addEventListener("touchend", touchHandlerDummy, false);

iOS下判断页面是否添加到主屏幕后从主屏幕打开

alert(navigator.standalone);

提高touchmove事件的性能

$('.dom').on('touchmove', function(){    // 处理逻辑})

如果处理逻辑的代码非常复杂，那就会使fps下降，可以添加一个setTimeout

$('.dom').on('touchmove', function(){    setTimeout(function(){        // 处理逻辑    },0);})

在iOS设备上弹出九宫格的数字键盘

像这种写法 <input type="number"> 是可以输入其他字符的
So，我们这样来搞定： <input type="text" pattern="\d*"> 实现纯数字输入
还有种九宫格数字键盘： <input type="tel"> 可以输入 +*# 等电话字符

input标签这玩意儿还挺好玩的 可以看下Apple的官方文档

各种CSS

• 禁止选中文字： -webkit-user-select:none
• 禁止iOS弹出各种操作窗口 -webkit-touch-callout:none
• Android去掉语音输入的按钮 input::-webkit-input-speech-button {display: none}
• 在节点上添加了 overflow-x: hidden;后滑动时，页面会不流畅，出现卡顿，这时候就需要-webkit-overflow-scrolling来hack一下
  *{-webkit-overflow-scrolling: touch;}
html,body{ overflow-x: hidden;}

事件

1、旋转事件 onorientationchange

window.onorientationchange = function() {    switch(window.orientation) {    　　case 0:            alert("正常屏幕");            break;    　　case -90:            alert("屏幕左转”);            break;    　　case 90:            alert("屏幕右转");            break;    　　case 180:        　　alert("屏幕倒转”);        　　break;    }};

旋转屏幕后字体大小会发生改变，阻止：

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

2、click事件
绑定了click后会出现点击后闪一下的情况，可以给绑定元素添加

-webkit-tap-highlight-color: rgba(0,0,0,0);

3、hover
使用touchstart和touchend模拟hover

$('.link').on('touchstart',function(){$(this).addClass('hover')});$('.link').on('touchend',function(){$(this).removeClass('hover')});.link:hover,.link.hover{ color:#fff }

4、active伪类
使active伪类生效，只需要在touchstart或touchend上添加空的匿名函数

$('a').on('touchend',function(){});

5、输入

input输入框 type=“date” 时添加placeholder的hack：

<input type="date" id="J_Date" placeholder="选择日期">$('#J_Date').on('focus', function(){    $(this).attr('type','date')});

同理，type的值为moonth week time时候一样处理 （不过week在iOS7上不支持）

忽略输入框自动大写和修正单词

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

iOS上打电话 发短信的a标签

<a href="tel:[phone]">Call Me</a><a href="sms:18688886666">Send Msg</a>      

是否支持svg

document.implementation.hasFeature("http:// www.w3.org/TR/SVG11/feature#Image", "1.1")