Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
3.8k views
in Technique[技术] by (71.8m points)

求助:使用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插件,不过这个应该不影响。

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

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

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

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

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...