我快疯了。我在生产中有一个非常复杂的带有ES6功能的React Webapp。在我认识的每个浏览器上的每个设备上，它都可以正常工作。在Chrome和Safari中，只有带有iOS 12.1.4的iPhone 7 Plus才出现问题：该应用仅显示白色。令我头疼的是，这在两种浏览器中都可以在当前的iPad上运行。 遗憾的是，我没有iPhone 7，因此无法查看开发者控制台。
我认为，某些ES6功能可能无法与渲染引擎结合使用，这可能是一个问题。因此，我导入了我可以想象的所有polyfill，但是仍然无法正常工作。
正如我所说，该应用程序非常复杂，因此这里有一些摘录可能有助于发现问题。
package.json
{
"name": "shortbox-react",
"version": "0.1.0",
"private": true,
"dependencies": {
"@babel/plugin-syntax-class-properties": "^7.2.0",
"@babel/polyfill": "^7.2.5",
"@material-ui/core": "^3.9.2",
"@material-ui/icons": "^3.0.2",
"@material-ui/lab": "^3.0.0-alpha.30",
"apollo-cache-inmemory": "^1.5.1",
"apollo-client": "^2.5.1",
"apollo-link-context": "^1.0.14",
"apollo-link-http": "^1.5.11",
"apollo-upload-client": "^10.0.0",
"dateformat": "^3.0.3",
"expand-tilde": "^2.0.2",
"formik": "^1.5.1",
"formik-material-ui": "0.0.16",
"graphql": "^14.1.1",
"graphql-tag": "^2.10.1",
"hamburgers": "^0.8.1",
"js-sha256": "^0.9.0",
"notistack": "^0.4.3",
"react": "^16.8.3",
"react-apollo": "^2.5.1",
"react-autosuggest": "^9.4.3",
"react-cookie": "^3.0.8",
"react-dom": "^16.8.3",
"react-hamburgers": "^1.0.0",
"react-images": "^0.5.19",
"react-router-dom": "^4.3.1",
"react-router-last-location": "^1.1.0",
"react-router-scroll-4": "^1.0.0-beta.2",
"require-uncached": "^2.0.0",
"recompose": "^0.30.0",
"yup": "^0.26.10"
},
"devDependencies": {
"react-scripts": "^2.1.5",
"typescript": "^3.3.3333"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<meta
content="minimum-scale=1, width=device-width, initial-scale=1, shrink-to-fit=no"
name="viewport"
/>
<meta content="#000000" name="theme-color"/>
<link href="%PUBLIC_URL%/manifest.json" rel="manifest"/>
<link href="%PUBLIC_URL%/apple-icon-57x57.png" rel="apple-touch-icon" sizes="57x57">
<link href="%PUBLIC_URL%/apple-icon-60x60.png" rel="apple-touch-icon" sizes="60x60">
<link href="%PUBLIC_URL%/apple-icon-72x72.png" rel="apple-touch-icon" sizes="72x72">
<link href="%PUBLIC_URL%/apple-icon-76x76.png" rel="apple-touch-icon" sizes="76x76">
<link href="%PUBLIC_URL%/apple-icon-114x114.png" rel="apple-touch-icon" sizes="114x114">
<link href="%PUBLIC_URL%/apple-icon-120x120.png" rel="apple-touch-icon" sizes="120x120">
<link href="%PUBLIC_URL%/apple-icon-144x144.png" rel="apple-touch-icon" sizes="144x144">
<link href="%PUBLIC_URL%/apple-icon-152x152.png" rel="apple-touch-icon" sizes="152x152">
<link href="%PUBLIC_URL%/apple-icon-180x180.png" rel="apple-touch-icon" sizes="180x180">
<link href="%PUBLIC_URL%/android-icon-192x192.png" rel="icon" sizes="192x192" type="image/png">
<link href="%PUBLIC_URL%/favicon-32x32.png" rel="icon" sizes="32x32" type="image/png">
<link href="%PUBLIC_URL%/favicon-96x96.png" rel="icon" sizes="96x96" type="image/png">
<link href="%PUBLIC_URL%/favicon-16x16.png" rel="icon" sizes="16x16" type="image/png">
<meta content="#ffffff" name="msapplication-TileColor">
<meta content="./favicon/ms-icon-144x144.png" name="msapplication-TileImage">
<title>Shortbox</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
index.js
import "@babel/polyfill";
import 'core-js/es6/map';
import 'core-js/es6/set';
import 'raf/polyfill';
import React from 'react';
import ReactDOM from 'react-dom';
import ApolloClient from "apollo-client";
import './index.css';
import App from './components/App'
import {ApolloProvider} from "react-apollo";
import CookiesProvider from "react-cookie/cjs/CookiesProvider";
import {Cookies} from 'react-cookie'
import {SnackbarProvider} from 'notistack';
import {InMemoryCache} from 'apollo-cache-inmemory';
import {setContext} from 'apollo-link-context';
import {BrowserRouter} from "react-router-dom";
import {ScrollContext} from 'react-router-scroll-4';
import {LastLocationProvider} from "react-router-last-location";
import Button from "@material-ui/core/Button/Button";
import {createUploadLink} from "apollo-upload-client";
const uploadLink = createUploadLink({
uri: 'http://localhost:4000'
});
const authLink = setContext((_, {headers}) => {
let cookies = new Cookies();
let token;
let session = cookies.get("session");
if (session)
token = cookies.get("session").id + ":" + cookies.get("session").sessionid;
return {
headers: {
...headers,
authorization: token ? `${token}` : "",
}
}
});
const client = new ApolloClient({
link: authLink.concat(uploadLink),
cache: new InMemoryCache()
});
ReactDOM.render(
<BrowserRouter>
<LastLocationProvider>
<ScrollContext>
<SnackbarProvider maxSnack={3}
action={[
<Button key="hide" className="snackbarbtn" color="primary" size="small">
Verbergen
</Button>
]}>
<CookiesProvider>
<ApolloProvider client={client}>
<App />
</ApolloProvider>
</CookiesProvider>
</SnackbarProvider>
</ScrollContext>
</LastLocationProvider>
</BrowserRouter>,
document.getElementById('root')
);
这些摘录来自我的开发环境，因此不要对开发设置感到好奇。 ：）
我与之共建
REACT_APP_ENV=production npm run build
任何想法，为什么它在该特定设备上不起作用。我一无所知。
谢谢！
答案 0 :(得分：0)
我找到了。如果有人想知道，window.screen.orientation似乎在此特定设备上未定义。
答案 1 :(得分：-1)
我有一些用户在iPhone 7和6s上遇到相同的问题。我不知道如何解决。
详细信息是：
用户单击一个链接，只有一个空白页。 服务器甚至无法收到任何请求。