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. .NET Core WebApi使用Swagger

    1.新建Core Api项目,引用Swashbuckle.AspNetCore 包 配置Startup.cs类的 using System; using System.Collections.Gene ...

  2. 01--c实现基础客户端和服务端与c++ boost.asio实现对比

    c实现服务端和客户端交互: 学习查阅的博客: https://blog.csdn.net/u011068702/article/details/54380259 https://blog.csdn.n ...

  3. Python获取当前时间或者当前时间戳【转】

    取得时间相关的信息的话,要用到python time模块,python time模块里面有很多非常好用的功能,你可以去官方文档了解下,要取的当前时间的话,要取得当前时间的时间戳,时间戳好像是1970年 ...

  4. 5. Java方法

    5.Java方法 1.何谓方法 Java方法是语句的集合,它们在一起执行一个功能. 方法是解决一类问题的步骤的有序组合 方法包含于类或对象中 方法在程序中被创建,在其他地方被引用 设计方法的原则:方法 ...

  5. php 23种设计模型 - 策略模式

    介绍 意图:定义一系列的算法,把它们一个个封装起来, 并且使它们可相互替换,用户还不需要知道其具体的实现 主要解决:在有多种算法相似的情况下,使用 if...else 所带来的复杂和难以维护. 何时使 ...

  6. Linux常用文件管理命令详解

    cat cat命令用于连接文件并打印到标准输出设备上. 命令语法:cat [参数] [文件名] 参数说明: 参数 说明 -n 由1开始对所有输出的行数进行编号. -b 由1开始对所有输出的行数进行编号 ...

  7. scoped样式

    scoped样式 作用∶让样式在局部生效防止冲突 写法∶<style scoped> 比如School组件和Student组件的样式名一样,当组件汇总到一起时样式会冲突.所以加上scope ...

  8. Fiddler抓取https协议的证书导入过程

    fildder抓取https的设置以及证书导出 打开fiddler界面,选择左上角菜单栏Tools-Options 出现Options界面后,选择HTTPS选项卡 勾选上Capture HTTPS C ...

  9. Spring MVC 04-- 接收前端参数json格式的方式

    /** * 第一种:以RequestParam接收 * 前端传来的是json数据不多时:{"id":1},可以直接用@RequestParam来获取值 * * @param id ...

  10. Linux详解 --- 进程管理

    镜像下载.域名解析.时间同步请点击 阿里云开源镜像站 进程管理一览 接下来的几篇博客,我将主要按照这个思维导图的划分去进行讲解. 管理 在理解什么是进程管理之前,我想我们可以先理解一下什么是管理! 问 ...