1. 程式人生 > >create-react-app ios8系統中頁面空白/樣式錯亂問題

create-react-app ios8系統中頁面空白/樣式錯亂問題

安裝 font 不能 npm www 頁面 nsh package 頁面空白

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系統中頁面空白/樣式錯亂問題