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 元素就会追随转动了。处理计划就是让全部页面处于一屏高度就可以处理题目的基础
<body>
<div class='warper'>
<div class='top'></div>
<div class='main'></div>
<div>
<div class="fix-bottom">
</div>
</body>
款式：
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关于挪动端的一些特别属性
<!--重要I是强迫让文档的宽度与装备宽度坚持1:1，最大宽度1.0，制止屏幕缩放。-->
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<!--这个也是iphone私有标签，许可全屏阅读。-->
<meta content="yes" name="apple-mobile-web-app-capable">
<!--iphone的私有标签，iphone顶端状况条的款式。-->
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<!--制止数字自动识别为电话号码，这个比较有效，由于一串数字在iphone上会显现成蓝色，款式加成别的色彩也是不见效的。-->
<meta content="telephone=no" name="format-detection">6.页面制止复制、选中文本
-webkit-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
