search

finance-sh / adaptive

javascript H5自适应方案
334 stars 32 forks source link

Usage on server side rendering 如何在服务端渲染环境使用 #5

Open wuzhuzhu opened 6 years ago

wuzhuzhu commented 6 years ago

使用next.js等框架时，使用服务端渲染特性。项目是移动端网页。按照之前其他的react项目经验，我们会选用adaptive.js和postcss-px2rem去做高清适配，以直接按照设计稿的px值在css中还原。 由于服务端无法直接获取window（即设备的width，dpr，of course），服务端渲染出来的html与客户端渲染出来的样式，root font-size将有很大出入，导致界面跳动剧烈。

已经尝试过而失败的思路：

在node server端通过user-agent取得设备dpr: 找不到合适的方式 适配所有的物理设备型号 =》 dpr，width 使 用http-client-hints： 草案未被广泛支持

Node server like koa2 || express can't get client device info(sure), it will cause rendered dom different from client side, make html flash. tried: get client info by user-agent: there's no lib for all device mapping http-client-hints: just a draft.

zhoushengmufc commented 6 years ago

给html body 初始化的时候设置font-size:12px，就不会剧烈抖动了

wuzhuzhu commented 6 years ago

恩 readme中是有提到的... 也就是说没有完美解决方案吗？

wuzhuzhu commented 6 years ago

测试了下<body style={{fontSize: '12px'}}> dpr不是1的时候 貌似跳动非常剧烈...