web app

Posted 2021-03-05 昵称太难取了

---【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;

　　} ）（）

　　]

 

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