移动端的适配坑（一）

1.   background ;  在vue的环境下  有的安卓手机背景图 显示不出来！！！     

    缘由： vue-cli配置缘由

 

2.  高度不一致的各类问题  ，   样式没有reset 致使的

 

3. 用flexible定义rem的时候

if (width / dpr > 540) {
     width = 540 * dpr;
}

上面的代码会致使视口超过540  高度什么的开始不适配了

 

4. vue项目 有些安卓机白屏  解决方法： 加入babel-polifill

5.  vue项目  偶尔出现返回白屏 

缘由：html，body都是100%，#app撑起了父元素的告诉，可是浏览器默认的滚动scroll并非#app，而是body,某些因素，形成返回history 后，没法复原（ios 的锅），为此，咱们将#app 进行了绝对定位，并让它从新成为 scroll 的对象，从而解决问题 

html, body {  
  width: 100%;  
  height: 100%;  
  margin: 0;  
  padding: 0;  
  position: relative;  
}  
#app {  
  width: 100%;  
  height: 100%;   
  overflow: scroll;  ---致使vue加载更多失效 致使loading效果失效
  -webkit-overflow-scrolling: touch;  ---致使vue加载更多失效 致使loading效果失效
  position: absolute;  
  left:0;  
  top:0;  
} 

可是 这个由于我用了mint-ui的下拉加载  若是加这段代码 会致使没有下拉加载 就把数据请求完  因此 这个目前还待解决

6. date日期 用  2018-12-01的格式在ios里显示的是NAN   

在ios里要用  2018/12/10这样的格式就能够成功显示

 

7. 咱们都知道 vue文件 打包完直接扔服务器就能够了  可是有时候须要放本地直接访问   这时候只要

    config/index.js     assetPublic的‘/’改成‘./’    productionSourceMap 为false

    route不要配置  mode:history

 

8. 根据媒体特性执行不一样的css

<link media = "screen and (min-width:768px) and (max-width:991px)" rel="" href = "">