资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/react 移动端 兼容性问题和一些小细节

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

liaosilzu2007 / 2815人阅读

摘要：主要有两种方式和。的私有标签，顶端状态条的样式。禁止数字自动识别为电话号码，这个比较有用，因为一串数字在上会显示成蓝色，样式加成别的颜色也是不生效的。页面禁止复制选中文本

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

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

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

iOS下 fixed与软键盘的问题

onClick 阻止冒泡

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

页面禁止复制、选中文本

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

</>复制代码 
  1.  由于 Babel 默认只转换转各种 ES2015 语法，而不转换新的 API，比如 Promise，以及 Object.assign、Array.from 这些新方法，这时我们需要提供一些 ployfill 来模拟出这样一个提供原生支持功能的浏览器环境。
  2.  主要有两种方式：babel-runtime 和 babel-polyfill。
  3. A.babel-runtime
  4.   1.babel-runtime 的作用是模拟 ES2015 环境，包含各种分散的 polyfill 模块，我们可以在自己的模块里多带带引入，比如 promise：
  5. ![图片描述][1]
  6.   2.它们不会在全局环境添加未实现的方法，只是这样手动引用每个 polyfill 会非常低效，我们可以借助 Runtime transform 插件来自动化处理这一切。
  7.   首先使用 npm 安装
  8. ![图片描述][2]
  9.   3.然后在 webpack 配置文件的 babel-loader 增加选项：
  10. ![图片描述][3]

B.babel-polyfill

</>复制代码 
  1.  而 babel-polyfill 是针对全局环境的，引入它浏览器就好像具备了规范里定义的完整的特性，一旦引入，就会跑一个 babel-polyfill 实例。用法如下：
  2.  1.安装 babel-polyfill
  3. ![图片描述][4]
  4.  2.在入口文件中引用：
  5. ![图片描述][5]

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

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

</>复制代码 
  1. A.android较低版本webview不支持Object.assign改用var objectAssign = require("object-assign’)  这种情况上面方案可以解决
  2. B.import React from "react";import ReactDOM from "react-dom";//不可放在其他模块引入的后面，否则android5.0及以下版本webview报错

3.iOS下 fixed与软键盘的问题

</>复制代码 
  1.  fixed失效是由于软键盘唤起后，页面的 fixed 元素将失效（ios认为用户更希望的是元素随着滚动而移动，也就是变成了 absolute 定位），
  2.  既然变成了absolute，所以当页面超过一屏且滚动时，失效的 fixed 元素就会跟随滚动了。解决方案就是让整个页面处于一屏高度就能解决问题的根本
  3.   
  4.     
     
  5.         
     
  6.         
     
  7.     
     
  8.     
  9.      
  10. 样式：
  11. warper{ 
  12.     position: absolute; 
  13.     width: 100%; 
  14.     left: 0; 
  15.     right: 0; 
  16.     top: 0; 
  17.     bottom: 0; 
  18.     overflow-y: scroll; 
  19.     -webkit-overflow-scrolling: touch;/* 解决ios滑动不流畅问题 */ }
  20. .fix-bottom{
  21.     position:fixed;
  22.     bottom:0;
  23.     width: 100%;
  24. }

4.onClick 阻止冒泡
阻止冒泡事件分三种情况

</>复制代码 
  1. A、阻止合成事件间的冒泡，用e.stopPropagation();
  2. ![图片描述][6]
  3. B、阻止原生事件与最外层document上的事件间的冒泡，用e.nativeEvent.stopImmediatePropagation();
  4. ![图片描述][7]
  5. C、阻止合成事件与除最外层document上的原生事件上的冒泡，通过判断e.target来避免
  6. ![图片描述][8]

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

</>复制代码

6.页面禁止复制、选中文本

</>复制代码 
  1. -webkit-user-select: none;
  2.  -moz-user-select: none;
  3.  -khtml-user-select: none;
  4.   user-select: none;
云服务器 GPU云服务器 webrtc移动端兼容性 兼容支持webrtc的移动端 ddos一些比较小的网站 兼容性问题

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/108756.html

相关文章

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

    摘要：主要有两种方式和。的私有标签，顶端状态条的样式。禁止数字自动识别为电话号码，这个比较有用，因为一串数字在上会显示成蓝色，样式加成别的颜色也是不生效的。页面禁止复制选中文本 react 移动端 兼容性问题和一些小细节 使用 ES6 的浏览器兼容性问题 react 对低版本的安卓webview 兼容性 iOS下 fixed与软键盘的问题 onClick 阻止冒泡 meta对于移动端的一些...

    BingqiChen 评论0 收藏0

  • 前端面试分享: 两年经验社招-阿里巴巴

    摘要：作者两年经验第一家任职的是个小公司第二家算是二线互联网公司各待了一年吧能有机会去阿里面试很惊喜先来和大家分享一下面试经历电话面试初探因为还在职的缘故电话面试从晚上点钟开始持续了半个小时左右一开始的时候特比紧张甚至声音略有些颤抖简单自我介绍做 作者两年经验, 第一家任职的是个小公司, 第二家算是二线互联网公司, 各待了一年吧... 能有机会去阿里面试很惊喜! 先来和大家分享一下面试经历....

    JowayYoung 评论0 收藏0

  • UI大全：前端UI框架集合（持续更新，当前32个）

    摘要：简洁直观强悍的前端开发框架，让开发更迅速简单。是一套基于的前端框架。首个版本发布于年金秋，她区别于那些基于底层的框架，却并非逆道而行，而是信奉返璞归真之道。 2017-1209 ZanUI (Vue) 2017-1218 Onsen UI(Vue, React, Angular) 2017-1215 增加 Vuetify, Weex UI, Semantic UI React,ele...

    only_do 评论0 收藏0

发表评论

登陆后可评论

0条评论

liaosilzu2007

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<