移动app的兼容性

1、防止手机中网页放大和缩小

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">

2、上下拉动滚动条时卡顿、慢

body {-webkit-overflow-scrolling:

touch; overflow-scrolling: touch;}

3、禁止复制、选中文本

Element {-webkit-user-select:none;

  -moz-user-select:none;

  -khtml-user-select:none;

  user-select:none;

}

4、圆角bug

background-clip: padding-box;

5、启动画面

iOS下页面启动加载时显示的画面图片,避免加载时的白屏。

<link rel="apple-touch-startup-image"href="start.png"/>

6、ios 设置input 按钮样式会被默认样式覆盖

input,

textarea {

  border: 0;

  -webkit-appearance: none;

}

7.ios中不识别时间横杠 如 2018-05-05(这个很恶心)把横杠换乘 /

8.安卓手机图片加载不出来

需要安卓判断图片地址 http(不安全) https

9.vue项目在ios 中以第三方地址跳转(跳转到vue页面的详情,有可能外部直接跳转)获取不到token

在详情页面中,重新获取token

10. iphone6 低版本对于弹性盒子属性不兼容,需要加上-webkit- 兼容。

11. Vue解决安卓4.4不兼容的问题

npm install babel-polyfill --save           npm install es6-promise --save    

     main.js中引入        

import 'babel-polyfill'import 

import Es6Promise from 'es6-promise'

require('es6-promise').polyfill()

Es6Promise.polyfill()

    webpack.base.conf.js 中修改  

module.exports = {

entry: {

    "babel-polyfill":"babel-polyfill",

     app: './src/main.js'
},
发布了44 篇原创文章 · 获赞 15 · 访问量 5万+

猜你喜欢

转载自blog.csdn.net/Sunshine0508/article/details/97238878