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：

 



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

  首先使用 npm 安装



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

B.babel-polyfill

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

 1.安装 babel-polyfill



 2.在入口文件中引用：


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

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();

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

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

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;

本文转载于:猿2048➥https://www.mk2048.com/blog/blog.php?id=h0110jhjbaa

react 移动端 兼容性问题和一些小细节的更多相关文章

  1. wn-cli 像React组件开发一样来开发微信小程序

    项目地址:wn-cli wn-cli wn-cli 像React组件开发一样来开发微信小程序 名字由来:wn -> weapp native 取第一个字母 Install npm install ...

  2. react基础学习和react服务端渲染框架next.js踩坑

    说明 React作为Facebook 内部开发 Instagram 的项目中,是一个用来构建用户界面的优秀 JS 库,于 2013 年 5 月开源.作为前端的三大框架之一,React的应用可以说是非常 ...

  3. 移动端全屏滑动的小插件，简单，轻便，好用，只有3k swiper,myswiper,page,stage

    https://github.com/donglegend/mySwiper mySwiper 移动端全屏滑动的小插件,简单,轻便,好用,只有3k 下载 直接下载 bower install mySw ...

  4. react服务端/客户端，同构代码心得

    FKP-REST是一套全栈javascript框架   react服务端/客户端,同构代码心得 作者:webkixi react服务端/客户端,同构代码心得 服务端,客户端同构一套代码,大前端的梦想, ...

  5. react服务端渲染（同构）

    学习react也有一段时间了,使用react后首页渲染的速度与seo一直不理想.打算研究一下react神奇服务端渲染. react服务端渲染只能使用nodejs做服务端语言实现前后端同构,在后台对re ...

  6. 跨界！Omi 发布多端统一框架 Omip 打通小程序与 Web 腾讯开源 2月28日

    https://mp.weixin.qq.com/s/z5qm-2bHk_BCJAwaodrMIg 跨界!Omi 发布多端统一框架 Omip 打通小程序与 Web 腾讯开源 2月28日

  7. react组件中的constructor和super小知识

    react组件中的constructor和super小知识 1.react中用class申明的类一些小知识 如上图:类Child是通过class关键字申明,并且继承于类React. A.Child的类 ...

  8. taro之React Native 端开发研究

    初步结论:如果想把 React Native 集成到现有的原生项目中,不能使用taro的React Native 端开发功能(目前来说不能实现,以后再观察).   RN开发有2种模式: 1.一是原生A ...

  9. echarts的title和legend重合解决（各种小细节）

    一:关于title与legend重叠 1.重合样子 2.解决办法: legend:{ show: true, top:"6%",//与上方的距离 可百分比% 可像素px }, 3. ...

随机推荐

  1. xsd文件生成cs文件命令

    C:\Windows\System32>xsd.exe c:/Createst.xsd -c C:\Windows\System32>xsd.exe c:/Creauest.xsd /c ...

  2. HarmonyOS小白入门设备开发的“芯”路历程

    HarmonyOS Connect设备开发,相信不少刚入门的开发者都被这些问题所困扰,面对五花八门的开发板不知道该怎么选取?芯片.模组.开发板傻傻分不清?如何使用代码控制开发板? 本期,我们将一一为你 ...

  3. 网络标准之:IANA定义的传输编码

    目录 简介 IANA的传输编码方式 7bit 8bit binary quoted-printable base64 总结 简介 不同的系统或者协议可以接受的数据类型是不同的,如果要在那些不支持现有数 ...

  4. LGP5044口胡

    套路题. 对于这一类与 \(\max\) 有关的题,优先考虑笛卡尔树. 建出笛卡尔树,考虑处理以某个点 \(u\) 举办会议时,参加会议的成本. 这里考虑询问区间为 \([1,n]\). 明显 \(u ...

  5. CF772D题解

    什么阴间十进制状压 题意:给定 $ n $ 数字,求定义函数 $ G(x) $ 能够表示 满足"十进制按位与为 $ x $"的集合的平方和之和乘上 \(x\),求 \(\bigop ...

  6. 一文让你明白CPU上下文切换

    我们都知道,Linux 是一个多任务操作系统,它支持远大于 CPU 数量的任务同时运行.当然,这些任务实际上并不是真的在同时运行,而是因为系统在很短的时间内,将 CPU 轮流分配给它们,造成多任务同时 ...

  7. Fedora 阿里云源

    镜像下载.域名解析.时间同步请点击 阿里巴巴开源镜像站 简介 Fedora 是一个 Linux 发行版,是一款由全球社区爱好者构建的面向日常应用的快速.稳定.强大的操作系统.它允许任何人自由地使用.修 ...

  8. nginx反向代理出现了代理的端口号

    nginx反向代理显示了代理的端口号 nginx反向代理配置文件 upstream mall { server 1.1.1.1:10261 weight=1; } server { listen 80 ...

  9. 关于IIS应用程序池的默认参数设置解决

    关于IIS应用程序池的默认参数设置,一般如下设置以满足IIS站点的需要. 1.关于IIS站点的启动模式,以及处理请求的管道模式设置. 2.回收机制设置, A)若IIS站点程序中存在单例模式访问DB数据 ...

  10. Java基础知识 String StringBuffer StringBuilder三者的区别(面试题)

    相同点:String.StringBuffer.StringBuilder最终底层存储与操作的都是char数组,StringBuffer和StringBuilder都继承了AbstractString ...