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

aimco
  • 13

大家好。我的网页采用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插件,不过这个应该不影响。
回复
阅读 1k
1 个回答
✓ 已被采纳

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

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

最新发现:或许是和浏览器最小fontSize有关,当计算到为5px时,是无法设置为根元素大小的,浏览器会默认以12px计算。所以解决方案可以将1rem设为100px。但已下班,明天去实践。
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏