Ant-design-mobile: 去掉 document.documentElement 依赖，以支持服务端渲染

[cncolder]

Grid 宽度的替代方案

两种解决方案：

1. 使用 vw 做为单位，${100 / columnNum}vw 做为每个单元格的宽度和高度，以此来实现正方形单元格，caniuse 显示 vw 单位在中国的支持率已经达到 81.54%，主流版本的浏览器中只有 Opera Mini 和 UC 不支持。

2. 增加 width 属性，优先使用 width，如果未设置则取值于 document.documentElement.clientWidth，参考 Menu

Environment(required) | 环境（必填）

• antd-mobile version（antd-mobile版本）: 1.0.7
• Browser (or mark react-native) and its version（浏览器或react-native版本）:
• Operating environment (e.g. OS name) and its version（操作系统版本或设备型号）:

What did you do? Please provide steps to re-produce your problem.（请提供复现步骤）

Grid

What do you expected?（预期的正常效果）

摆脱对 document.documentElement.clientWidth 的硬性依赖

What happen?（发生了何种非正常现象）

服务端环境没有 document，也无法从其他途径推测 clientWidth 的值。

Re-producible online demo (可复现的在线demo)

[cncolder]

@paranoidjk

如果采用方案2，要想让服务端获取到 clientWidth，目前看来只有一个办法，就是应用的入口 landing 页使用 javascript 把 clientWidth 写入 cookies，然后跳转到应用首页 （例如 /main），好在我们是一个 mobile 项目，clientWidth 不会产生变化。

类似的还有 clientHeight devicePixelRatio

甚至所有引用 navigator.userAgent 的地方，我们都可以给对应的组件加上 userAgent 属性，允许外部传入，当需要取值的时候可以用 this.props.userAgent || navigator.userAgent

参考 https://css-tricks.com/make-client-side-data-available-server-side/

[pingan1927]

这个主要是解决测试问题？

[paranoidjk]

关联 https://github.com/ant-design/ant-design-mobile/pull/1061

@pingan1927 解决服务端渲染的问题

[paranoidjk]

• 个人倾向方案二，类似 这里 的处理

• 其实不只 Grid 一处的，https://github.com/ant-design/ant-design-mobile/search?l=TypeScript&q=document.documentElement&type=&utf8=%E2%9C%93

[paranoidjk]

@cncolder 这个 去掉 document.documentElement 依赖，先单独来个 PR 吧，ssr 那个在这个基础上进行。

[benjycui]

@cncolder 蚂蚁这边的容器都是基于 UC 内核的，所以 UC 不支持的特性，就意味着不能用了。。

[paranoidjk]

1111 #1122 Grid, ImagePicker 已改完。