finance-sh/adaptive

javascript H5自适应方案

adaptive's Issues

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

使用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.

使用webpack打包安装adaptive的时候安卓浏览器下报报错

引入方式

import adaptive from 'adaptive'

export default () => {
  adaptive.desinWidth = 375
  adaptive.baseFont = 14
  adaptive.init()
}

报错信息

Cannot read property 'newBase' of undefined

原因

function checkRem() {
        if (/android/ig.test(window.navigator.appVersion)) {
            var hideDiv = document.createElement('p');
            hideDiv.style.height = '1px';
            hideDiv.style.width = '2.5rem';
            hideDiv.style.visibility = 'hidden';
            document.body.appendChild(hideDiv);
            var now = hideDiv.offsetWidth;
            var right = window.adaptive.newBase * 2.5;  // 这一行从全局上面去读取adaptive，而通过webpack打包时全局是没有adaptive的，所以报错了，应该直接改成adaptive.newBase * 2.5;就可以吧
            if (Math.abs(right / now - 1) > 0.05) {
                lib.errDpr = right / now;
                setRem();
            }
            document.body.removeChild(hideDiv);
        }
    }

偶尔会出现整个网页都很小的情况

跟没加载JS一个样子，是什么回事呢，几率很小出现，但是存在