美文网首页
前端移动app兼容(有些比较隐蔽)

前端移动app兼容(有些比较隐蔽)

作者: zx一个胖子 | 来源:发表于2018-05-16 14:26 被阅读0次

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

相关文章

网友评论

      本文标题:前端移动app兼容(有些比较隐蔽)

      本文链接:https://www.haomeiwen.com/subject/esppdftx.html