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. 假如让你来设计SSL/TLS协议，你要怎么设计呢？

    摘要:本文将从设计者的视角介绍如何一步步设计出一个简易版的 SSL/TLS 的过程,在文章的最后,再简单介绍 TLS 1.2 版本的工作机制,以此帮助大家对 SSL/TLS 协议的基本原理有一个更深入 ...

  2. LeetCode-103-二叉树的锯齿形层序遍历

    二叉树的锯齿形层序遍历 题目描述:给定一个二叉树,返回其节点值的锯齿形层序遍历.(即先从左往右,再从右往左进行下一层遍历,以此类推,层与层之间交替进行). 示例说明请见LeetCode官网. 来源:力 ...

  3. 矩池云 | 利用LSTM框架实时预测比特币价格

    温馨提示:本案例只作为学习研究用途,不构成投资建议. 比特币的价格数据是基于时间序列的,因此比特币的价格预测大多采用LSTM模型来实现. 长期短期记忆(LSTM)是一种特别适用于时间序列数据(或具有时 ...

  4. JavaScript闭包的概念及用法

    1.闭包的概念: 闭包就是能够读取其他函数内部变量的函数. 例如: function f1(){ var n=999; function f2(){ alert(n); } return f2; } ...

  5. IEAD关于git配置以及拉代码和提交代码

    1.提前安装git客户端,注册码云帐号 注册地址:https://gitee.com/signup 2.新建仓库 3.修改仓库信息 4.从IDEA拉git项目,下面两个地方都可以配置 首次创建需要输入 ...

  6. dedecms 5.7 任意前台用户修改漏洞

    一. 启动环境 1.双击运行桌面phpstudy.exe软件 2.点击启动按钮,启动服务器环境 二.代码审计 1．双击启动桌面Seay源代码审计系统软件 2．点击新建项目按钮,弹出对画框中选择(C:\ ...

  7. python练习册 每天一个小程序 第0012题

    # -*-coding:utf-8-*- def test(content): text = content flag = 0 with open('filtered_words.txt') as f ...

  8. 数字IC笔试题-芯源

    前言 由于最近开始找数字IC的工作,所以准备多练笔试题,下面贴上芯源笔试题,来源微信公众号<数字IC打工人> 参考资源: 1. mu_guang_ 2.  李锐博恩 3. 长弓的坚持 4. ...

  9. JDBC操作数据库的步骤 ？

    注册数据库驱动. 建立数据库连接. 创建一个Statement. 执行SQL语句. 处理结果集. 关闭数据库连接.

  10. SpringBoot 上传文件大小限制，SizeLimitExceededException: the request was rejected because its size (64042302) exceeds the configured maximum (10485760)

    对应的配置属性文件:org.springframework.boot.autoconfigure.web.servlet.MultipartProperties 由于我是yml文件,所以直接这样定义就 ...