ReactJS + Heroku：为什么我的网站没有移动响应？答案

【问题标题】：ReactJS + Heroku: Why doesn't my website become mobile responsive?ReactJS + Heroku：为什么我的网站没有移动响应？
【发布时间】：2016-09-13 18:14:38
【问题描述】：

我最近在 Heroku 上部署了一个 ReactJS 网站，我相信我有一个网站需要具备移动响应能力，但该网站看起来与在桌面上查看时的外观完全相同。在移动设备上查看时，一切都非常小。

可能是什么问题？

这是 HTML：

<html lang="en" class="practice">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <title>Practice Web</title>
    <meta name="description" content="practice">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <div id="app"></div>
  <script type="text/javascript" src="/bundle.js"></script></body>
</html>

【问题讨论】：

这对我来说看起来不错，减去格式。您如何在移动设备上对其进行测试？
@arniekoz 我直接访问 URL。可能是什么问题...
您使用的是 chrome 开发工具、设备检查器、模拟器还是...？
@arniekoz 抱歉，您问的是我使用的是哪个浏览器？我在开发时使用的是谷歌浏览器。
是的，您如何实际测试它在移动设备上不起作用？您使用的是设备、模拟器还是谷歌浏览器开发工具（设备检查器）之类的东西？ developers.google.com/web/tools/chrome-devtools/iterate/…

标签： css html reactjs heroku

【解决方案1】：

也许内容延伸到容器之外，比如图像或其他东西。试试这个看看是不是这样：

<html lang="en" class="practice">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <title>Practice Web</title>
    <meta name="description" content="practice">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style type="text/css">
      body {
        width: 100%;
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <div id="app"></div>
    <script type="text/javascript" src="/bundle.js"></script>
  </body>
</html>

【讨论】：

终于开始尝试了，但不幸的是仍然无法正常工作。会不会是 Heroku 的问题？