求助:使用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插件,不过这个应该不影响。
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
我更明白了一点,我的rem方案应该是没错的。px的物理尺寸不固定,所以它的物理尺寸没有意义,有意义的是它的数量。那么大屏幕分辨率宽为960px,即横向有960个px(此时一个大屏幕的px会比小屏幕的px物理尺寸大,即此时大屏1rem=5px实际大小甚至会大于pc的1rem=10px)。
现在的问题貌似是因为那段适配JS代码在电视大屏上不起作用,而在手机和其他电脑上能正常展示。不知道是不是电视的内置浏览器的问题,疑难仍然亟需解决。不知道有没有人曾遇过类似情况。