5:4的显示屏展示16:9开发稿的处理记录

省流：

        增加div套层+高度缩放 解决。

需求描述：

        前端网页开发稿、新型号机子分辨率均为1920*1080(16:9)，结果一体机的屏幕分辨率却是1080*1024(5:4)，导致已开发好的整套页面丢上去显示默认铺满，高度被拉伸，页面显得瘦高。

        内心OS：为啥不能做好设备选型，或者看能否直接设置显示器显示模式不要是全屏铺满啥的呢，反正后面就是机子太贵、代码开发、前端调整。

处理思路：

        最开始没看到实际瘦高图的时候想到的是媒体查询，以为正式页面是那种页面没有变形但是展示不全的情况，这样虽然麻烦一点要重做一套5:4的样式，但是感觉可以一劳永逸。后边看到实际瘦高图加上工期巨短、机子还不在手头能边写边看之后就打消了这个念头(虽然调整内嵌机的分辨率加媒体查询依旧可以完成解决，但是会谢)。

        于是和同事商量打算上下加个黑边，中间的挤到一块展示。这样虽然也行，但实际做起来要适配的点也不少，这个项目内很多高度定死，一个个看、调工作量不低于新写套样式。

        在后面突然想到css缩放，于是就给App.vue的主体块往上套了一层，然后把原本的主体块高度缩小到原来的一部分，再到全部页面看一看有哪里不对劲的稍微处理下就成功了。

效果图：

        内容总体有扁平变形的情况，因为这是16:9下的截图，到了实际机子上就是正常的样子了。

        最后，这只是一个临时想到的取巧法子，要是大家有更好建议欢迎交流，我也想学习学习。