zoukankan      html  css  js  c++  java
  • web app

    ---【native app】是安卓和ios 的app       安卓=java  ios=oc  (在应用里下载)

    ---【混合app】   一个项目既有安卓的页面 也有web app的页面  (部署文件在服务器上)

    --【web app rem适配方案一】

          (function(){              没有破坏完美视口,转换需要配合less

        var styleNode = document.createElement("style");

        var  w = document.documentElement.clientdwidth/16;

        styleNode.innerHTML = "html{font-size:"+w+"px!important}"

        document.head.appendChild(styleNode);

      } )()

    ---【web app viewport 适配方案二】:

         =每一个元素在不通过设备上占据的CSS像素的个数是一样的,但CSS像素和物理像素比例是不一样的,等比例

           =所量即所得,没有使用完美视口

        (function(){

          var targetW = 640;

          var scale = document.documentElement.clientwidth/targetW;

          var meta = document.querySelector("meta[name='viewport']");

          meta.content = "initlal-scale="+scale+",minimum-scale="+scale+",maximum-scale="+scale+",user-scalable=no";

         })()

    ---【一物理像素】:方案一

        window.onload=function(){

          (function(){           

        --- var dpr = window.devicePixelRatio || 1 ;

        var styleNode = document.createElement("style");

        var  w = document.documentElement.clientdwidth/16;

        styleNode.innerHTML = "html{font-size:"+w+"px!important}"

        document.head.appendChild(styleNode);

        --- var scale = 1/dpr;

        --- var meta = document.querySelector("meta[name='viewpport']");

        --- meta.content = "width=device-width,initial-scale="+scale;

      } )()

      ]

    ---【一物理像素方案二】:

        #div{ height:1px;widht:100}

        @media only screen and (-webkit-device-pixel-ratio:3){

        #div{   transform:scaleY(.5)     };

        }

        @media only screen and (-webkit-device-pixel-ratio:2 ){

        #div{   transform:scaleY(.33333333333333)     };

        }

    ---【ie6的兼容问题】:

      1,最小高度是19px  解决在body style=""font-size:0"     

      2,  解决之后的极限高度是2px,

    ---【移动端的事件】:

      1,touchstart      手指按上

      2,touchmove     手指滑动

      3,touchend        手指离开

    ---【阻止默认事件】: even.preventDefalut()

    ---【草料二维码】  网址生成二维码

    ---【阻止移动页面所有默认事件】:

      window.onload = function(){ 

      document.addEventListener("tocuchstart",function(ev){

      ev = ev||enent;

      ev.preventDefault();

      })

       }

    ---1,pc端的事件可以在移动端触发

      2,pc端事件有300毫秒延迟

      3,移动端事件不会有延迟

    ---【移动端阻止所有默认事件后的a标签跳转  以及解决手指滑过 造成误触跳转】:

      var aNodes = document.querySelectorAll("a") 拿到所有a标签

      for(var i = 0.i<aNodes.length,i++){                   循环a标签,使用location。href 来跳转

        aNodes[i].addEventListener("tochstart",function(){

          this.isMoves = false;

              })

        aNodes[i].addEventListener("tochmove",function(){

          this.isMoved = true;

              })

        aNodes[i].addEventListener("tochend",function(){

          if(this.inMoved){ locatioon.href = this.href };

              })

      }

    ---【介绍几个web app 的移动框架】

      1,http://www.easybui.com/         

      2,

      

  • 相关阅读:
    canvas 平移&缩放
    html + css + jquery实现简单的进度条实例
    jQuery Layer mobile 弹出层
    jQuery-全屏滚动插件【fullPage.js】API 使用方法总结
    Hive:select count(distinct)优化以及hive.groupby.skewindata
    Spark Application、Driver、Job、stage、task
    Spark 参数说明
    Xgboost小结与调参
    梯度下降算法过程详细解读
    机器学习杂记
  • 原文地址:https://www.cnblogs.com/zzhqdkf/p/12499184.html
Copyright © 2011-2022 走看看