1. 空白问题

因为缺少polyfill

在public/index.html 中引入如下js

<script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.7/es5-shim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.7/es5-sham.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/json3/3.3.2/json3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.34.2/es6-shim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.34.2/es6-sham.min.js"></script>
-----以上方案可行
 
备注:安装 npm install '@babel/polyfill' 并 import '@babel/polyfill' 会在import行中提示 无法找到'@types/babel__polyfill'的声明文件(并未找到解决方案)

2. 样式错乱问题

package.json文件中 browserslist 表示兼容到浏览器什么版本

npx browserslist 可以查看项目支持的浏览器版本信息

ios8系统的 safari版本是ios8

修改如下

"browserslist": [
"since 2014"
]
可以支持到 2014年的所有浏览器
为了支持 safari 8
修改如下,增加"safari >= 8",只对safari做特殊处理
"browserslist": [
">0.2%",
"not dead",
"safari >= 8",
"not ie <= 9",
"not op_mini all"
]
 
不能写 "not safari < 8"
因为其他条件的限制,只允许兼容到 safari 10.1

safari 12
safari 11.1
safari 10.1

 
----------------------------
https://www.jianshu.com/p/bd9cb7861b85   browserslist 目标浏览器配置表

create-react-app ios8系统中页面空白/样式错乱问题的更多相关文章

  1. 在 .NET Core 5 中集成 Create React app

    翻译自 Camilo Reyes 2021年2月22日的文章 <Integrate Create React app with .NET Core 5> [1] Camilo Reyes ...

  2. 深入 Create React App 核心概念

    本文差点难产而死.因为总结的过程中,多次怀疑本文是对官方文档的直接翻译和简单诺列:同时官方文档很全面,全范围的介绍无疑加深了写作的心智负担.但在最终的梳理中,发现走出了一条与众不同的路,于是坚持分享出 ...

  3. iOS 的 APP 在系统中如何适配不同的屏幕的尺寸

    iOS 的 APP 在系统中如何适配不同的屏幕的尺寸 标签: 2007年,初代iPhone发布,屏幕的宽高是 320 x 480 像素.下文也是按照宽度,高度的顺序排列.这个分辨率一直到iPhone ...

  4. 如何扩展 Create React App 的 Webpack 配置

    如何扩展 Create React App 的 Webpack 配置  原文地址https://zhaozhiming.github.io/blog/2018/01/08/create-react-a ...

  5. tap news:week5 0.0 create react app

    参考https://blog.csdn.net/qtfying/article/details/78665664 先创建文件夹 安装create react app 这个脚手架(facebook官方提 ...

  6. 使用create react app教程

    This project was bootstrapped with Create React App. Below you will find some information on how to ...

  7. Create React App

    Facebook开源了React前端框架(MIT Licence),也同时提供了React脚手架 - create-react-app. create-react-app遵循约定优于配置(Coc)的原 ...

  8. Create React App 安装less 报错

    执行npm run eject 暴露模块 安装 npm i  less less-loader -D 1.打开 react app 的 webpack.config.js const sassRege ...

  9. create react app 项目部署在Spring(Tomcat)项目中

    网上看了许多,大多数都是nginx做成静态项目,但是这样局限性太多,与Web项目相比许多服务端想做的验证都很麻烦,于是开始了艰难的探索之路,终于在不经意间试出来了,一把辛酸... 正常的打包就不说了. ...

随机推荐

  1. 接近8000字的Spring/SpringBoot常用注解总结!安排!

    0.前言 大家好,我是 Guide 哥!这是我的 221 篇优质原创文章.如需转载,请在文首注明地址,蟹蟹! 本文已经收录进我的 75K Star 的 Java 开源项目 JavaGuide:http ...

  2. Spring Boot中使用@JsonComponent

    文章目录 序列化 反序列化 在同一个class中序列化和反序列化 Spring Boot中使用@JsonComponent @JsonComponent 是Spring boot的核心注解,使用@Js ...

  3. 基于Atlas实现mysql读写分离

    一.实验环境 主机名IP地址 master192.168.200.111 slave192.168.200.112 atlas192.168.200.113 主从复制不再赘述,链接地址:授权Atlas ...

  4. 徐州H

    #include<bits/stdc++.h> using namespace std; #define rep(i,a,b) for(int i=a;i<=b;++i) #defi ...

  5. javascript SDK开发之webpack打包支持对象展开运算符...

    场景:使用了对象的展开运算符,webpack打包报错,错误如下:Parsing error: Unexpected token - 1.安装依赖 npm install babel-preset-st ...

  6. vuex vue-devtools 安装

    vue-devtools是一款基于chrome游览器的插件,用于调试vue应用,这可以极大地提高我们的调试效率.接下来我们就介绍一下vue-devtools的安装 chrome商店直接安装 谷歌访问助 ...

  7. Babel 在浏览器环境使用方法

    Babel 也可以用于浏览器环境.但是,从 Babel 6.0 开始,不再直接提供浏览器版本,而是要用构建工具构建出来.如果你没有或不想使用构建工具 1.通过安装5.x版本的babel-core模块获 ...

  8. HDU1873 看病要排队【模拟+优先队列】

    看病要排队 Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Subm ...

  9. cookie ,session 和localStorage的区别详解

    2019独角兽企业重金招聘Python工程师标准>>> cookie ,session 和localStorage的区别详解 博客分类: js 当你在浏览网站的时候,WEB 服务器会 ...

  10. C++ 模板(template) 的定义

    定义: 模板(template)是实现代码重用机制的一种工具,它可以实现类型参数化,把类型定义为参数(模板元编程),从而实现了真正的代码可重用性. 模板是用来批量生成功能和形式都几乎相同的代码的.编译 ...