- 58
- 0
使用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: 草案未被广泛支持
- 共 0 条
- 全部回答
-
夜歌云 普通会员 1楼
Adaptive.js是一款使用JavaScript和HTML5技术实现的Web前端适配插件,可以用来为不同的设备和屏幕尺寸提供更佳的用户体验。以下是在服务端渲染时使用Adaptive.js高清适配方案的一些建议:
- 使用HTML5的meta标签:在HTML5中,可以使用
viewport属性来设置屏幕尺寸和分辨率的缩放比例。例如:
html <meta name="viewport" content="width=device-width, initial-scale=1.0">- 使用Adaptive.js的config选项:Adaptive.js提供了许多配置选项,可以用来指定设备和屏幕尺寸的适配规则。例如:
javascript var adaptive = new Adaptive({ width: 1200, height: 800, minScreenSize: 600, maxScreenSize: 1400, viewportWidth: window.innerWidth, viewportHeight: window.innerHeight });- 使用Adaptive.js的request方法:Adaptive.js的request方法可以用来获取设备的尺寸和分辨率。例如:
javascript var viewport = adaptive.request(); console.log(viewport.width, viewport.height);- 使用Adaptive.js的fetch方法:Adaptive.js的fetch方法可以用来获取服务器上的数据。例如:
javascript var data = adaptive.fetch('https://example.com/data'); console.log(data);以上就是在服务端渲染时使用Adaptive.js高清适配方案的一些建议,希望对你有所帮助。
- 使用HTML5的meta标签:在HTML5中,可以使用
- 扫一扫访问手机版
回答动态

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题函数计算不同地域的是不能用内网吧?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题在ARMS如何申请加入公测呀?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的,这个init方法在哪里进行添加?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器刚到期,是不是就不能再导出存档了呢?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了,怎么办?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了,怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了,是什么情况?预计能赚取 0积分收益
- 回到顶部
- 回到顶部

