webApp开发中的总结

meta标签： 

H5页面窗口自动调整到设备宽度，并禁止用户缩放页面

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

忽略将页面中的数字识别为电话号码

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

忽略Android平台中对邮箱地址的识别

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

ios设备(不只iphone)中的safari私有meta标签，它表示：允许全屏模式浏览，开启对Web Aapp程序的支持

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

ios系统的私有标签，它指定在web app状态下，ios设备中顶端的状态条的颜色； 默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明）。若值为“black-translucent”将会占据页面px位置，浮在页面上方（会覆盖页面20px高度–iphone4和itouch4的Retina屏幕为40px）

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

当网站添加到主屏幕快速启动方式，可隐藏地址栏，仅针对ios的safari

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

WebView 默认的样式:

body{
    -webkit-text-size-adjust:none;  /* 字型大小是不会变的，而使用者就无法透过缩放网页来达成放大字型*/
    -webkit-appearance: none;       /*可以改变按钮或者其它控件看起来类似本地的控件 */
    -webkit-user-drag: none;        /*-webkit-user-drag CSS 属性控制能否将元素作为一个整体拖动。*/
     -webkit-user-select : none; /* 如果用户长按web网页的文本内容，都会出现选中的行为，提供复制文字等功能。禁止用户选中文字 for iOS */
}
a,button,input,textarea{
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0); /*很多Android 浏览器的 a 链接有边框，这里取消它 transparent */
}
a, img{
  -webkit-touch-callout:none;  /* 在IOS浏览器里面，假如用户长按a标签，都会出现默认的弹出菜单事件。禁止用户在新窗口打开页面、如何禁止用户保存图片＼复制图片 for iOS */
}

调用手机拨电话面板、短信面板、电子邮件

<a href="tel:18005555555">Call us at 1-800-555-5555</a>
<a href="sms:18005555555">
<a href="sms:18005555555,18005555556">
<a href="mailto:peun@foxmail.com">单击这里给peun发电子邮件</a>

调用时间

HTML5 拥有多个供选择日期和时间的新的输入类型：

• date - 选择日、月、年
• month - 选择月、年
• week - 选择周、年
• time - 选择时间（时、分）
• datetime - 选择时间、日期、月、年（UTC 时间）
• datetime-local - 选择时间、日期、月、年（本地时间）

<input type="date" name="user_date" />

调用颜色

<input type="color" name="user_color" />

检测是否已连网，以及网络速度

通用的

if (window.navigator.onLine) {
  alert('online')
} else {
  alert('offline');
}
// in IE 8 "online" and "ofline" events are raised on the document.body, under IE 9 - on both document.body and window
window.addEventListener("offline", function(e) {alert("offline");});
window.addEventListener("online", function(e) {alert("online");});

判断是否wifi网络

if (navigator.connection.type==navigator.connection.WIFI) {
   // code for WiFi connections (high-bandwidth)
}

检测是否已联网，以及网络速度

function netDetect(){
    //alert(window.navigator.userAgent);
    var connection, connectionSpeed;    

    // create a custom object if navigator.connection isn't available
    connection = navigator.connection || {'type':'0'};   

    switch(connection.type){
        case connection.ETHERNET:
        case connection.WIFI:
            connectionSpeed = 'highbandwidth';
        break;
        case connection.CELL_3G:
            connectionSpeed = 'mediumbandwidth';
        break;
        case connection.CELL_2G:
            connectionSpeed = 'lowbandwidth';
        break;
        case connection.UNKNOWN:
        default:
            connectionSpeed = 'noConnect';
    }  

    return connectionSpeed;
}   

function is_Android_Wifi(){
    var connection = navigator.connection;
    if(window.navigator.isAndroid && (connection.type == connection.ETHERNET || connection.type == connection.WIFI))
        return true;
    else return false;
}

隐藏IOS滚动条

self.tableView.showsVerticalScrollIndicator =NO;

对于需要适配各种移动设备，使用rem

funW();
$(window).resize(function(event) {
   funW();
});
function funW(){
   var winW = $(window).width();
   var fontSize = $("html").css('font-size',winW/7.5);
}

拦截手机物理返回键，双击退出APP（AppCan）

 appcan.ready(function() {
        var presstime=0;
        uexWindow.setReportKey(0, 1);
        uexWindow.onKeyPressed = function(keyCode) {
            if (keyCode == 0) {
            if(presstime==0){
            uexWindow.toast("0", "5","再按一次返回键退出！", "3000");
            presstime=1;
            }else{
            presstime=1;
            uexWidgetOne.exit(0);
            }
            setTimeout(function() {
            presstime=0;
            }, 3000);
            }
        }
   })

判断手机类型

//判断手机类型
	var ua = navigator.userAgent.toLowerCase();
	if (/iphone|ipad|ipod/.test(ua)) {
        // 判断如果是iphone或者iPad则执行
		 if (/iphone|mac/i.test(navigator.userAgent)){
            var html = "<div style='width:100%;height: 0.4rem;;background:#fff;position:fixed;top:0;'></div>";
            $(".main_top").css('top', '0.4rem');
            $(".main_top").before(html);
            $(".content").css("margin-top","1.28rem");
            $(".pin_control_top").css('top','1.28rem');
            $(".pin_control_content").css("margin-top","2.08rem");
            $(".buildingDetail .pin_control_content").css("margin-top","0rem");
            $(".buildingDetail .pin_control_content_title:first").css("margin-top","2.08rem");
            $(".unitDetail .content1").css("margin-top","2.08rem");
            $(".unitDetail .content2").css("margin-top","2.12rem");
            $(".unitDetail .content3").css("margin-top","2.12rem");
            $(".unit_dis_div").css('top','2.08rem');
            $(".performance .topmodular").css("top","2.08rem");
        }
        if (/ipad/i.test(navigator.userAgent)){
            var html = "<div style='width:100%;height:0.2rem;background:#fff;position:fixed;top:0;'></div>";
            // $("body").css("padding-top",'1.08rem');
            $(".main_top").css('top', '0.2rem');
            $(".main_top").before(html);
            $(".content").css("margin-top","1.08rem");
            $(".pin_control_top").css('top','1.08rem');
            $(".pin_control_content").css("margin-top","1.88rem");
            $(".buildingDetail .pin_control_content").css("margin-top","0rem");
            $(".buildingDetail .pin_control_content_title:first").css("margin-top","1.88rem");
            $(".unitDetail .content1").css("margin-top","1.88rem");
            $(".unitDetail .content2").css("margin-top","1.92rem");
            $(".unitDetail .content3").css("margin-top","1.92rem");
            $(".unit_dis_div").css('top','1.88rem');
            $(".performance .topmodular").css("top","1.88rem");
        }
	} else if (/android/.test(ua)) {
		$(".main_top").css({"height":"0.96rem","line-height":"0.96rem"});
		$(".My_top_img").css("margin-top","0.96rem");
		$(".content").css("margin-top","0.96rem");
	}else {
		$(".main_top").css({"height":"0.96rem","line-height":"0.96rem"});
		$(".My_top_img").css("margin-top","0.96rem");
		$(".content").css("margin-top","0.96rem");

	};

移动端版本兼容（适用于）

<meta name="viewport" content="width=750, user-scalable=no, target-densitydpi=device-dpi">

<script type="text/javascript">
        var phoneWidth =  parseInt(window.screen.width);
        var phoneScale = phoneWidth/640;
        var ua = navigator.userAgent;
        if (/Android (\d+\.\d+)/.test(ua)){
            var version = parseFloat(RegExp.$1);
            if(version>2.3){
                document.write('<meta name="viewport" content="width=640, minimum-scale = '+phoneScale+', maximum-scale = '+phoneScale+', target-densitydpi=device-dpi">');
            }else{
                document.write('<meta name="viewport" content="width=640, target-densitydpi=device-dpi">');
            }
        } else {
            document.write('<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">');
        }
</script>