react 移动端 兼容性问题和一些小细节
2024-10-01 03:55:51
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
最新文章
- 使用vscode访问和修改远程计算机文件
- vim 长句子中的上下移动
- Spring中的Jdbc事务管理
- 蜗牛历险记(二) Web框架(中)
- How to hanganalyze and systemstate dumps
- PHP 表单验证 - 验证 E-mail 和 URL
- 网站常用js代码搜集
- Linux screen 常用命令
- android打电话
- web自动化测试从入门到持续集成(selenium webdriver)
- 如何给虚拟主机安装phpMyAdmin
- [Python Study Notes]字符串处理技巧(持续更新)
- Retrofit 2.0 超能实践,完美支持Https传输
- Django 数据流程图
- python配置文件的加载
- JDK动态代理(2)--------反射Method的作用
- libnids-1.24 使用源码问题
- git命令详解( 八)
- How to install VCM 2 Ford IDS 109 software
- Distribution(F题)---第八届河南省程序设计大赛
热门文章
- 如何设置计算机IP地址
- k8s集群StatefulSets的Pod调度查询丢失问题?
- 搞懂MySQL(各种)索引类型及其区别
- VUE-表单验证
- thinkpad笔记本选型
- 那些年踩过的坑---java篇
- jdk配置完成tomcat无法启动问题解决
- Numpy库基础___五
- MySQL知识补充(表字段操作、视图、触发器、事物、存储过程、内置函数、流程控制、索引、慢查询)
- Redis的Unable to connect to Redis和java.io.IOException: 远程主机强迫关闭了一个现有的连接问题的解决