webApp开发中的总结

meta标签： 

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

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

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

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

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

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

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

?
1
<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）

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

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

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

WebView 默认的样式:

?
1
2
3
4
5
6
7
8
9
10
11
12
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 */   
}  

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

?
1
2
3
4
<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 - 选择时间、日期、月、年（本地时间）
?
1
<input type="date" name="user_date" />

调用颜色

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

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

通用的

?
1
2
3
4
5
6
7
8
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网络

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

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
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滚动条

?
1
self.tableView.showsVerticalScrollIndicator =NO;

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

?
1
2
3
4
5
6
7
8
funW();
$(window).resize(function(event) {
   funW();
});
function funW(){
   var winW = $(window).width();
   var fontSize = $("html").css('font-size',winW/7.5);
}

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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);
           }
       }
  })

判断手机类型

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
//判断手机类型
    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");
         
    };

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<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>

　　

posted @   wxw婉  阅读(632)  评论(0)  编辑  收藏  举报
编辑推荐：
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
阅读排行：
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· ollama系列1：轻松3步本地部署deepseek，普通电脑可用
· 按钮权限的设计及实现
· 【杂谈】分布式事务——高大上的无用知识？
点击右上角即可分享
微信分享提示