账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    服务端渲染时如何使用adaptive.js高清适配方案
    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
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 夜歌云 普通会员 1楼

      Adaptive.js是一款使用JavaScript和HTML5技术实现的Web前端适配插件,可以用来为不同的设备和屏幕尺寸提供更佳的用户体验。以下是在服务端渲染时使用Adaptive.js高清适配方案的一些建议:

      1. 使用HTML5的meta标签:在HTML5中,可以使用viewport属性来设置屏幕尺寸和分辨率的缩放比例。例如:

      html <meta name="viewport" content="width=device-width, initial-scale=1.0">

      1. 使用Adaptive.js的config选项:Adaptive.js提供了许多配置选项,可以用来指定设备和屏幕尺寸的适配规则。例如:

      javascript var adaptive = new Adaptive({ width: 1200, height: 800, minScreenSize: 600, maxScreenSize: 1400, viewportWidth: window.innerWidth, viewportHeight: window.innerHeight });

      1. 使用Adaptive.js的request方法:Adaptive.js的request方法可以用来获取设备的尺寸和分辨率。例如:

      javascript var viewport = adaptive.request(); console.log(viewport.width, viewport.height);

      1. 使用Adaptive.js的fetch方法:Adaptive.js的fetch方法可以用来获取服务器上的数据。例如:

      javascript var data = adaptive.fetch('https://example.com/data'); console.log(data);

      以上就是在服务端渲染时使用Adaptive.js高清适配方案的一些建议,希望对你有所帮助。

    更多回答
    网站公告
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部