Question

我是新手做出反应并创建了一个小应用程序。在桌面上一切正常，但应用程序的反应部分不会显示在移动设备上。可以告诉我应该做些什么吗？

http://dry-wildwood-76655.herokuapp.com/

的package.json

{
  "name": "udacitytransportationapp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js",
    "prod": "NODE_ENV=production node server.js",
    "postinstall": "webpack -p"
  },
    "author": "",
    "license": "ISC",
  "dependencies": {
    "babel-core": "^6.11.4",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.9.0",
    "babel-preset-react": "^6.11.1",
    "babel-preset-stage-1": "^6.5.0",
    "express": "^4.14.0",
    "html-webpack-plugin": "^2.22.0",
    "jquery": "^3.1.0",
    "lodash": "^4.13.1",
    "moment": "^2.14.1",
    "offline-plugin": "^3.4.2",
    "react": "^15.2.1",
    "react-dom": "^15.2.1",
    "react-router": "^2.6.0",
    "webpack": "^1.13.1"
  },
  "devDependencies": {
    "mocha": "^2.5.3",
    "webpack-dev-server": "^1.14.1"
  }
}

的index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Transportation App</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/style/style.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  </head>
  <body>
    <div class="header">
      <nav class="navbar navbar-default">
        <div class="container-fluid">
          <div class="navbar-header">
            <div class="navbar-brand">TransportationApp</div>
          </div>
          <ul class="nav navbar-nav navbar-right">
            <li>
              <a href="http://www.bart.gov/">With this app you can search through the BART station schedules</a>
            </li>
          </ul>
        </div>
      </nav>
    </div>
    <div class="container"></div>
  </body>
  <script src="/bundle.js"></script>
</html>

风格/ style.css中

.bart-image {
  width: 300px;
  height: 300px;
}

.table-row {
  padding-top:30px;
}

Answer 1

你的问题在于使用fetch。如果您查看文档https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API，您会发现所有浏览器都不支持它。这就是为什么它出现在桌面镀铬但不是safari以及它为什么不能在移动设备上工作的原因。

reactjs app在桌面上正常工作但在移动设备上看不到

1 个答案: