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" rel="external nofollow" >Call us at 1-800-555-5555</a>
<a href="sms:18005555555" rel="external nofollow" >
<a href="sms:18005555555,18005555556" rel="external nofollow" >
<a href="mailto:peun@foxmail.com" rel="external nofollow" >单击这里给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>