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. LeetCode-047-全排列 II

    全排列 II 题目描述:给定一个可包含重复数字的序列 nums ,按任意顺序 返回所有不重复的全排列. 示例说明请见LeetCode官网. 来源:力扣(LeetCode) 链接:https://lee ...

  2. jmeter + tomcat + ant + svn +jenkins 实现持续集成测试

    l 安装jdk时候需要提前检查jdk是否安装成功 l 在dos下输入javac      java -version l l 安装jmeter l 校验是否安装成功: l 进入jmeter目录下bin ...

  3. unittest简介01

    前言 熟悉java的应该都清楚常见的单元测试框架Junit和TestNG,python里面也有单元测试框架-unittest,相当于是一个python版的junit. 一.unittest简介 1.先 ...

  4. CDN网络科普小文（小说版）

    引言 作为公司 cdn 小组的一名小码仔,我为写一篇 cdn 的科普文章准备了好一段时间(大概有一个多月没有更新我的社交账号了). 在我刚进入公司,培训完,进入小组,了解到我们做的是 cdn 相关的工 ...

  5. 微信小程序书简易支付

    这里结合了上一篇的手机号登录接下来的实现功能 https://www.cnblogs.com/xiaoyantongxue/p/15472915.html 登录后进入课程选择页面 1:数据库填入数据 ...

  6. tensorflow源码解析之framework-function

    目录 什么是function FunctionDef 函数相关类 关系图 涉及的文件 迭代记录 1. 什么是function 在讲解function的概念之前,我们要先回顾下op.op是规定了输入和输 ...

  7. 路径查找算法应用之A*算法

    环境:Visual Studio 2017 + .Net Framework 4.5 应用场景:在画板上查找起始点和目标点之间的最短最直路径,最后画出连接两个点之间的折线. 算法简介:A*算法是一种性 ...

  8. 【Vulnhub靶场】RED: 1

    环境准备 下载靶机导入到vmware 但是获取不到地址,可以根据我博客里的方法修改网卡来获取IP地址 信息收集 我们改好网卡之后,我们使用arp-scan命令来探测靶机的IP地址 靶机IP地址为:19 ...

  9. springcloud学习00-开发工具相关准备

    用maven构建springcloud项目,目录结构(图片来源:https://blog.csdn.net/qq_36688143/article/details/82755492) 1.maven ...

  10. 【Ansible】ansible容器学习环境搭建

    想要学习ansible,只有一个节点肯定是不行的,而搭建虚拟机又是一件非常费时费力费资源的事情,所以通过docker 快速搭建一个容器学习环境是一个不错的选择 1. 了解ansible部署 1.1 需 ...