react支持android5吗,react 移动端 兼容性问题和一些小细节

react 移动端 兼容性问题和一些小细节

使用 ES6 的浏览器兼容性问题

react 对低版本的安卓webview 兼容性

iOS下 fixed与软键盘的问题

onClick 阻止冒泡

meta对于移动端的一些特殊属性

页面禁止复制、选中文本

1.使用 ES6 的浏览器兼容性问题

由于 Babel 默认只转换转各种 ES2015 语法，而不转换新的 API，比如 Promise，以及 Object.assign、Array.from 这些新方法，这时我们需要提供一些 ployfill 来模拟出这样一个提供原生支持功能的浏览器环境。

主要有两种方式：babel-runtime 和 babel-polyfill。

A.babel-runtime

1.babel-runtime 的作用是模拟 ES2015 环境，包含各种分散的 polyfill 模块，我们可以在自己的模块里单独引入，比如 promise：

![图片描述][1]

2.它们不会在全局环境添加未实现的方法，只是这样手动引用每个 polyfill 会非常低效，我们可以借助 Runtime transform 插件来自动化处理这一切。

首先使用 npm 安装

![图片描述][2]

3.然后在 webpack 配置文件的 babel-loader 增加选项：

![图片描述][3]

B.babel-polyfill

而 babel-polyfill 是针对全局环境的，引入它浏览器就好像具备了规范里定义的完整的特性，一旦引入，就会跑一个 babel-polyfill 实例。用法如下：

1.安装 babel-polyfill

![图片描述][4]

2.在入口文件中引用：

![图片描述][5]

其实做到这些，在大部分浏览器就可以正常跑了，

2.react 对低版本的安卓webview 兼容性

A.android较低版本webview不支持Object.assign改用var objectAssign = require('object-assign’) 这种情况上面方案可以解决

B.import React from 'react';import ReactDOM from 'react-dom';//不可放在其他模块引入的后面，否则android5.0及以下版本webview报错

3.iOS下 fixed与软键盘的问题

fixed失效是由于软键盘唤起后，页面的 fixed 元素将失效(ios认为用户更希望的是元素随着滚动而移动，也就是变成了 absolute 定位)，

既然变成了absolute，所以当页面超过一屏且滚动时，失效的 fixed 元素就会跟随滚动了。解决方案就是让整个页面处于一屏高度就能解决问题的根本

样式：

warper{

position: absolute;

width: 100%;

left: 0;

right: 0;

top: 0;

bottom: 0;

overflow-y: scroll;

-webkit-overflow-scrolling: touch;/* 解决ios滑动不流畅问题 */ }

.fix-bottom{

position:fixed;

bottom:0;

width: 100%;

}

4.onClick 阻止冒泡

阻止冒泡事件分三种情况

A、阻止合成事件间的冒泡，用e.stopPropagation();

![图片描述][6]

B、阻止原生事件与最外层document上的事件间的冒泡，用e.nativeEvent.stopImmediatePropagation();

![图片描述][7]

C、阻止合成事件与除最外层document上的原生事件上的冒泡，通过判断e.target来避免

![图片描述][8]

5.meta对于移动端的一些特殊属性

6.页面禁止复制、选中文本

-webkit-user-select: none;

-moz-user-select: none;

-khtml-user-select: none;

user-select: none;