关于大屏项目中分辨率和高宽比的总结

大屏项目中分辨率和高宽比的总结

本文出自博客

前言：

最近做第一次大屏项目，虽然我是写后端，但是前端和整个项目也是紧密相连的，项目组因为客户显示的大屏分辨率和设计图的一些问题浪费了一些不必要的时间。所以在这里记录一下；

问题：

情况说明：客户现场的大屏幕是由一般二十几寸的1920 * 1080分辨率的小屏幕，由5 x 3拼接成的一个大屏幕，我们错误的是按照1920 * 5 / 1080 * 3 这样的分辨率去设计了第一版UI，发现连内容都显示不完整，大小比例都严重不协调。导致前端UI重做，浪费的大量的人力物力。

屏幕高宽比非常重要

分析：

去详细了解了关于拼接的大屏幕分辨率，高宽比一些基本的常识，原来15个1920 * 1080 的显示器拼接的大屏最后显示的还是1920 * 1080 的分辨率显示，只是高宽比原来更大了，高宽比也变成了80：27，单个的小显示器是16:9的宽高比。从理论上讲，是可以实现1920 * 5 : 1080 * 3的分辨率的，这样电脑的显卡也不支持啊，是不是？这个是由大屏的拼接技术决定的，而目前的大屏还是逻辑分辨率（1920 * 1080 ），在大屏幕上只是同比例放大了而已，由于拼接后的大屏高宽比和电脑显示器的不一致，会导致投放到大屏上的页面一定的拉伸和压缩；

处理方案：

解决办法：目前只能以1920 * 1080的分辨率去设计页面，页面的大小按照客户现场的大屏高宽比（16 * 5 ：9 * 3）去设计，这样能达到最好的显示效果；

最后强调： 屏幕高宽比非常重要，屏幕高宽比非常重要，屏幕高宽比非常重要

参考博客：

http://www.woshipm.com/ucd/198774.html
https://blog.csdn.net/qq_42061692/article/details/85566174

本文出自博客