求助:使用rem适配方案时,在电视大屏分辨率过低时不兼容。

发布于 2022-09-12 13:25:26 字数 621 浏览 19 评论 0

大家好。我的网页采用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插件,不过这个应该不影响。

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

溺孤伤于心 2022-09-19 13:25:26

我更明白了一点,我的rem方案应该是没错的。px的物理尺寸不固定,所以它的物理尺寸没有意义,有意义的是它的数量。那么大屏幕分辨率宽为960px,即横向有960个px(此时一个大屏幕的px会比小屏幕的px物理尺寸大,即此时大屏1rem=5px实际大小甚至会大于pc的1rem=10px)。

现在的问题貌似是因为那段适配JS代码在电视大屏上不起作用,而在手机和其他电脑上能正常展示。不知道是不是电视的内置浏览器的问题,疑难仍然亟需解决。不知道有没有人曾遇过类似情况。

最新发现:或许是和浏览器最小fontSize有关,当计算到为5px时,是无法设置为根元素大小的,浏览器会默认以12px计算。所以解决方案可以将1rem设为100px。但已下班,明天去实践。

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文