移动端的适配坑（一）

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 = "">