lintanfu 2020-11-20 16:18 采纳率: 0%
浏览 1017

大屏幕电视适配采用rem方案时,大屏分辨率过小导致页面不兼容。

大家好。我的网页采用rem方案,需要放到大屏展示。

我利用js控制字体px大小

(function () {
  var rem = 10;
  rem = (rem / 1920) * document.documentElement.clientWidth;
  document.documentElement.style.fontSize = rem + "px";
})();

我按照1920*1080的设计稿开发(我的电脑也是这个分辨率)在我电脑上1rem=10px;可是,以前一直没有考虑过这个问题,就是这样拿到的是屏幕的分辨率,而大屏的分辨率宽度只有960px,也就是导致大屏的1rem=5px,页面乱了套。

这个js方法如果要实现适配,需要获取的是屏幕实际宽度而不是分辨率,不知道为何网上都是这套方案,还是我的用法错误了吗?

还是有什么办法可以获取到设备的实际尺寸呢?

求各路技术人指教。十分感谢。

另外,我前端使用了vue和echarts插件,不过这个应该不影响。

  • 写回答

3条回答 默认 最新

  • 一只成序源 2020-11-20 16:55
    关注

    document.querySelector('body').getBoundingClientRect()

    就可以拿到宽高,偏移量之类的

    评论

报告相同问题?

悬赏问题

  • ¥15 DIFY API Endpoint 问题。
  • ¥20 sub地址DHCP问题
  • ¥15 delta降尺度计算的一些细节,有偿
  • ¥15 Arduino红外遥控代码有问题
  • ¥15 数值计算离散正交多项式
  • ¥30 数值计算均差系数编程
  • ¥15 redis-full-check比较 两个集群的数据出错
  • ¥15 Matlab编程问题
  • ¥15 训练的多模态特征融合模型准确度很低怎么办
  • ¥15 kylin启动报错log4j类冲突