网站可以在笔记本电脑浏览器上运行，但不能在移动浏览器上运行答案

【问题标题】：Website works on Laptop Browser but does not work on Mobile Browser网站可以在笔记本电脑浏览器上运行，但不能在移动浏览器上运行
【发布时间】：2020-01-20 07:22:53
【问题描述】：

我使用 MERN 堆栈开发了一个网络应用程序。这个网站是：www.javascriptmazes.com。出于某种原因，当我在笔记本电脑的浏览器上打开该链接时，一切正常。但是，当我尝试在我的移动（三星）手机上打开同一个网站时，页面无法正确加载，我最终只看到浏览器的白色背景。

我不知道如何在手机上进行调试，因为我总是在笔记本电脑上进行调试。但是我去了这个网站https://www.mobilephoneemulator.com/并尝试在模拟器上加载上述网络链接，显示的错误消息是：

混合内容：“https://www.mobilephoneemulator.com/”处的页面通过 HTTPS 加载，但请求的样式表“http://www.javascriptmazes.com/static/css/main.1e4202c6.css”不安全。此请求已被阻止；内容必须通过 HTTPS 提供。 emulate.php?url=http%3A//javascriptmazes.com&user_agent=Mozilla/6.0 (iPhone%3B CPU iPhone OS 8_0 like Mac OS X) AppleWebKit/536.26 (KHTML%2C like Gecko) Version/8.0 Mobile/10A5376e Safari/8536.25 &device=Apple-Iphone6:1 混合内容：“https://www.mobilephoneemulator.com/”处的页面是通过 HTTPS 加载的，但请求了不安全的脚本“http://www.javascriptmazes.com/static/js/main.5d7eb463.js”。此请求已被阻止；内容必须通过 HTTPS 提供。

如何通过 HTTPS 提供内容？以及如何知道哪些具体内容需要更改？

我正在使用 MERN....所以我的客户端使用 React....另外，如果您查看 Web 应用程序，我会使用大量 HTML 画布和脚本在 HTML 画布上绘制...。我不'不知道这是否相关但只是想提一下以防万一......

如何解决这个问题？

【问题讨论】：

在 Chrome 中我也得到白页 Uncaught TypeError: Cannot read property 'apply' of undefined at redux.js:604 at i (redux.js:85) at Object.<anonymous> (store.js:34) at t (bootstrap a926ca3834f103a1b3df:19) at Object.<anonymous> (App.js:13) at t (bootstrap a926ca3834f103a1b3df:19) at Object.<anonymous> (index.js:3) at t (bootstrap a926ca3834f103a1b3df:19) at Object.<anonymous> (main.5d7eb463.js:71) at t (bootstrap a926ca3834f103a1b3df:19)
同意 Roland 的观点，您应该检查控制台错误。我的猜测是这个错误阻止了其他东西的加载。检查 HTML，中唯一的非脚本是 <div id="root"></div>（即没有内容）。
@preston Windows 10，Chrome 版本 77.0.3865.90
啊，区别可能在于 Blink 与 WebKit...apple.stackexchange.com/a/350674
现在也可以在这里使用。

标签： javascript responsive-design google-chrome-devtools mobile-website mern

【解决方案1】：

好的，我发现了问题。 Redux 开发工具导致了这个问题。我将其更改为：

var store = createStore(
      rootReducer,
      initialState,
      compose(
        applyMiddleware(...middleware),
        window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()

      )
     );

到：

var store = createStore(
      rootReducer,
      initialState,
      compose(
        applyMiddleware(...middleware),
        window.__REDUX_DEVTOOLS_EXTENSION__ ? window.__REDUX_DEVTOOLS_EXTENSION__() : f => f
      )
     );

它现在可以在我的手机上使用....

【讨论】：

【解决方案2】：

您在手机（三星）上看到的白页就是人们在 Windows 上的 Chrome 中看到的。我会学习如何使用remote debugging tools，而不是尝试使用模拟器。

【讨论】：