使用 react 做了个应用,在开发模式下,所有浏览器正常运行;
在使用 webpack build 之后, prod 下,手机 chrome 可以正常运行,部分 webview 也可以正常运行,但是手机 qq 浏览器和 uc 浏览器完全不进行 react 的渲染; 使用 weinre 调试了, js 没有报什么异常;
这张是有问题的(手机 QQ),手机上只显示 456 :
这张是被正常渲染的(手机 chrome)
还有可能是哪里出了问题呢?
搞定了。
其中的一个原因是因为UC浏览器,在fetch时候,如果不设置headers中的Accept
,那么UC会默认设置一串text/html
值,可惜没有json支持,服务器端将返回一个html页面。老版本headers我只设置了Content-Type
,其他浏览器的Accept
默认则为*/*
。不过奇怪的是,最初在prod下,UC和QQ似乎没有运行到fetch的地方;整个页面都是空白的;
修改这个地方支持之后,页面就都ok了;
PS:顺手碰到一个页面扭曲的地方,UC还不支持css calc,唉;
1
serco 2016-08-01 13:31:32 +08:00 1
加上 babel-polyfill 试试,有些手机浏览器连 es5 都支持不全
|
2
plqws 2016-08-01 14:15:11 +08:00
这时候应该 @ 那些浏览器的项目人员
|
3
est 2016-08-01 14:20:05 +08:00
不知道全球工单论坛这次灵不灵。
|
5
xxxyyy 2016-08-01 15:10:56 +08:00 via Android 1
试下去掉 weinre ,然后用 window.onerror 捕获错误并打印到 HTML 里
|
6
fuxiaohei 2016-08-01 15:53:24 +08:00
可以总结一下修改的地方发出来
手机浏览器和微信浏览器对标准的支持各种奇特,只能经验总结啊 |
7
xi_lin 2016-08-01 15:56:58 +08:00
好奇 weinre 你是怎么调试 js 的?
|
8
gkiwi OP @fuxiaohei
刚刚又找了下,没有,都靠经验。。。 少量: http://www.cnblogs.com/maplejan/archive/2013/04/26/3045928.html @xi_lin 主要用 weinre 查看一些前端代码看看结果。如果 js 异常,里面会有 log 。有时候也 console 一些;没有断点调试; |
10
del1214 2016-08-02 10:58:01 +08:00
CSS calc 国产浏览器没几个支持的
|
11
gkiwi OP |
12
hdr01 2017-10-22 13:07:15 +08:00
遇到同样的问题找到这来了。。react 开发的页面,chrome 下正常,但是 IE 和手机端浏览器都是空白的,查了下是 react 根本没有挂载到 dom 上。。。
一年前的帖子了,不过还是想问下具体怎么解决的? |
13
gkiwi OP @hdr01 #12 使用 weinre,看下 console 呢?有什么提示信息么?
我之前的有点忘记了,但是有一点还记得比较深刻,就是 React.Component 对象,一个是用 React 创建的,一个是第三方库创建的(忘记是哪个了,记为 S ),两者的结构不一样(因为 S 创建的数据结构版本和 React 自身的不同,报错的地方有个 Symbol,你可以通过 weinre 验证一下)。解决的方案,记得是用了 babel-polyfill,但是不太确定了。 你先用 weinre 看下异常。 另外你可以看看 IE 的 console,截图发一下。 |
14
superelepant 2018-04-11 17:59:39 +08:00
@serco 确实是这个问题
|