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

时间 2019-12-05

原文原文链接

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

使用 ES6 的浏览器兼容性问题
react 对低版本的安卓webview 兼容性
iOS下 fixed与软键盘的问题
onClick 阻止冒泡
meta对于移动端的一些特殊属性
页面禁止复制、选中文本

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

因为 Babel 默认只转换转各类 ES2015 语法，而不转换新的 API，好比 Promise，以及 Object.assign、Array.from 这些新方法，这时咱们须要提供一些 ployfill 来模拟出这样一个提供原生支持功能的浏览器环境。
 主要有两种方式：babel-runtime 和 babel-polyfill。

 A.babel-runtime
 1.babel-runtime 的做用是模拟 ES2015 环境，包含各类分散的 polyfill 模块，咱们能够在本身的模块里单独引入，好比 promise：

2.它们不会在全局环境添加未实现的方法，只是这样手动引用每一个 polyfill 会很是低效，咱们能够借助 Runtime transform 插件来自动化处理这一切。
  首先使用 npm 安装

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

B.babel-polyfillreact

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

2.在入口文件中引用：

其实作到这些，在大部分浏览器就能够正常跑了，android

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

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与软键盘的问题ios

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 阻止冒泡
阻止冒泡事件分三种状况web

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

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

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

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

<!--主要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.页面禁止复制、选中文本promise

-webkit-user-select: none;
 -moz-user-select: none;
 -khtml-user-select: none;
  user-select: none;

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

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

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

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