vue 不是常用分辨率的前端大屏适配

vue 不是常用分辨率的前端大屏适配

最近公司有个需求，需要在一块1920X1620的大屏上全屏做一个可视化页面，设计稿也是按照1920X1620做的，但是投屏电脑的分辨率是1920X1080，且自定义电脑分辨率投屏大屏不支持投放，这可咋整呀。

既然投屏上去会被拉升，那就把它做成扁的，然后拉升就行了，最开始想的解决方案是开发页面的时候把高度都按照比例缩小写，但这显然不对，一是修改工作量大，最重要的问题是自定义组件，比如echarts等其它可视化组件无法适配，因为图例是自动生成的。还有最重要的一个点文字会被拉长，就会非常难看。

后来公司大哥大想出了解决方案，先按照正常比列写，然后将整个页面上下通过transform压缩，就完美了，具体代码如下：

外层：

#app {
   .wh(100vw,1080px);
   overflow: hidden;
   // 如果不使用，页面不会顶到最上面，会使上方出现空白，使用align-items可以让容器居中。
    display: flex;
   align-items: center;
}

内部：

.home {
	.wh(100vw,1620px);
    transform: scaleY(0.666667);
}

注意：
弹窗也放在app中，才会显示正常，不要使用append-to-body

<el-dialog class="business" :visible.sync="dialogVisible" :modal-append-to-body='false' 
:modal='true':close-on-click-modal='true' :before-close="cancel" v-if="dialogVisible">