WebApp开发概要

    
    
    //添加到主屏后的标题
    
    //百度禁止转码
    
    //隐藏地址栏如果要显示的话可以不添加
    
    //在启动webapp的时候可以使用这个控制，black--黑色，default--白色，black-translucent--半透明
    
    
    
    //上面三个表示忽略页面中的识别为电话号码和邮箱，第三个为缩写这个是在页面中有类似电话的数组的时候进行忽略处理的
     
    // 优先使用最新版本 IE 和 Chrome
    
    //清除winphone中a标签点击后出现灰色背景

    
       
    
    
    //指定web app添加到主屏后的图标路径，有两种略微不同的方式。第一种是设计原稿，第二种会添加高光效果（IOS6）             


    123456
    //开启电话功能
    123456 
    //开启短信功能
    [email protected] 
    //开启邮箱功能（安卓）
    
    
    
    //上面两个是手机上的上传文件，第一个是图片第二个是视频，第三个是录音功能，可以使用**accept**操作，上面的第二个属性是capture，这个是直接调用摄像头或者话筒的，如果是调取图片而不是拍照的话可以省略。`注意兼容问题以及样式问题`
        
        //默认关闭IOS中的首字母大写
         
        //关闭iOS输入自动修正
  
        //放在form里面可以将软件盘的换行键转换为回车键。

内容比较零散，大部分可以直接拉入文件中使用，使用时请注意检查是否正确，如果错误希望留言以便修改。
在开发移动站点的时候我试过了使用vw，vh。vh就像网上大部分地方所说的在安卓手机中会识别软键盘，如果使用的话会出现变形现象，所以后期我调整了一下继续使用rem进行设置，不过在页面横版分块的时候使用的还是vw（或者使用%）。这个方式类似于阿里开发淘宝移动站的方式，不同的是淘宝会根据手机型号以及尺寸不同更改data-dpr的值，而这个不会，但是相对的使用起来更加简单。

!function(win) {
               function resize() {
                   var domWidth = domEle.getBoundingClientRect().width;
                   if(domWidth / v > 540){
                       domWidth = 540 * v;
                   }
                   win.rem = domWidth / 16;
                   domEle.style.fontSize = win.rem + "px";
               }
               var v, initial_scale, timeCode, dom = win.document, domEle = dom.documentElement, viewport = dom.querySelector('meta[name="viewport"]'), flexible = dom.querySelector('meta[name="flexible"]');
               if (viewport) {
                   var o = viewport.getAttribute("content").match(/initial\-scale=(["']?)([\d\.]+)\1?/);
                   if(o){
                       initial_scale = parseFloat(o[2]);
                       v = parseInt(1 / initial_scale);
                   }
               } else if(flexible) {
                   var o = flexible.getAttribute("content").match(/initial\-dpr=(["']?)([\d\.]+)\1?/);
                   if (o) {
                       v = parseFloat(o[2]);
                       initial_scale = parseFloat((1 / v).toFixed(2))
                   }
               }
               if (!v && !initial_scale) {
                   var n = (win.navigator.appVersion.match(/android/gi), win.navigator.appVersion.match(/iphone/gi));
                   v = win.devicePixelRatio;
                   v = n ? v >= 3 ? 3 : v >= 2 ? 2 : 1 : 1, initial_scale = 1 / v
               }
               //没有viewport标签的情况下
               if (domEle.setAttribute("data-dpr", v), !viewport) {
                   if (viewport = dom.createElement("meta"), viewport.setAttribute("name", "viewport"), viewport.setAttribute("content", "initial-scale=" + initial_scale + ", maximum-scale=" + initial_scale + ", minimum-scale=" + initial_scale + ", user-scalable=no"), domEle.firstElementChild) {
                       domEle.firstElementChild.appendChild(viewport)
                   } else {
                       var m = dom.createElement("div");
                       m.appendChild(viewport), dom.write(m.innerHTML)
                   }
               }
               win.dpr = v;
               win.addEventListener("resize", function() {
                   clearTimeout(timeCode), timeCode = setTimeout(resize, 300)
               }, false);
               win.addEventListener("pageshow", function(b) {
                   b.persisted && (clearTimeout(timeCode), timeCode = setTimeout(resize, 300))
               }, false);
               resize();
           }(window);

以上代码也是相应式的方式，与与阿里类似，不过少了对data-dpr的设置。只修改根font-size的大小。
注意：rem比例值为40px。
http://www.jianshu.com/p/cef8a4c6881f
以上为基础rem文件。