前端移动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'},

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。