1.无线开发Tips（持续更新）

[ccforward]

无线开发的积累

Tips

• 调用chrome打开链接
  • iOS: <a href="googlechrome:www.taobao.com">taobao</a>
  • Android: <a href="intent://www.taobao.com#Intent;scheme=http;package=com.android.chrome;end">taobao</a> 若没有安装chrome浏览器，Android会弹出对话框，自行选择浏览器；iOS会显示网址无效
  • 未安装chrome时，Android下会有友好的提示，iOS暂时没有好的解决办法

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:18688886666">Call Me</a>
<a href="sms:18688886666">Send Msg</a>      

是否支持svg

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

[refanbanzhang]

666

[sysuxw]

把很多以前遇到的问题都总结了呢，赞👍

[daviddawang]

666