vue项目使用自适应布局投屏到物理拼接屏变形的处理

这段时间，一直在做一个大屏项目，它的需求是：物理屏幕（LED拼接屏）的分辨率为：6720*2160，大屏页面需满足：通过屏幕分辨率为1920*1080的PC的浏览器访问IOC大屏，接HDMI线投屏后，物理大屏可被填满，显示分辨率为6720*2160，不会出现图像拉伸或压缩。

有了几个大屏经验的我们，直接就选择了vue+element ui 来做这个项目，另外，为了做自适应，我们选择了用vw,vh作为单位代替px。按照ui的蓝湖图，我写好的静态页面，在pc端上显示得非常完美，但是万万没想到在投屏时出现了严重得压缩和拉伸得问题。客户的电脑是1920*1080的分辨率， 大屏幕是拼接屏，不能直接当作一块显示屏，只能通过电脑复制投屏达到目的， 1920*1080，与6720*2160的屏幕差异是非常大的，所以文字出现拉伸变宽了，而环状图、饼图就出现了变扁被压缩的情况。

为了处理这个问题，我们去借鉴了dataV的框架做法，pc端略被纵向挤压，而复制投屏后就能够刚好正常拉伸显示。查看了一番后发现，对方做到了屏幕自适应，但使用的并不是rem，em或者vh,vw，而是直接使用了px作为单位，如下图：（1576px仅占用了1920px分辨率的四分之一左右！）；

 

 后来再看页面最大的盒子的特点，发现它除了直接写px为单位以外，还使用了transform:scale来放大缩小，以达到目的，如下图：

 

 不断地拉伸屏幕，发现scale的两个横轴轴的数不断地改变，因此，我们要做的就是考虑如何得到这样跟着屏幕分辨率大小的变化而跟着变化的比率。

我的做法是这样的。。。。。。

首先， 用6720/2160，等到大概3.1的比值，那么我们获取屏幕高为1080px，假设高度不变，那么按照比例，此时宽应该为3348px，也就是1080*3.1， 

 

 

如果宽度继续发生变化的话，那么为了让比例保持不变，那么就要进行比率的调整，将宽度进行缩放，于是我们有了下面这个函数

 

 紧接着，监听屏幕高度的变化，重新调用上面的resizePage的方法，以此来改变scale中bi的比率，做完上面这一步会发现，这个时候比率会根据屏幕高度的变化而变化，但是当屏幕的宽度发生变化时却不会再变化了，

因为刚刚的设定就是假设高变化，宽进行transform:scale(xxx,1)的的配置；所以如果宽也发生变化，那也需要进行屏幕宽度变化的监听，计算出真实的宽与设定3.1倍的宽直接的scale比率，如下图:

 

 做完这一步，就达到目的了，不管是只改变宽，还是只改变高，或是宽高同时变化都可以实现自适应。