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'},