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>
