此前分享过两篇关于等比适配的文章（Viewport And Rem），分别介绍了按照宽度进行等比适配的两种具体实。然而，按照宽度等比适配这个方案本身并不完美，今天就来讨论讨论如何打上这个补丁
一、缺陷是什么？
既然是等比适配，那么只能以容器的一边为基准，另一边等比，通常情况我们都是以宽度进行等比（例如，通过 Viewport 将容器宽度固化成 750，然后在设计稿中高效的量多少写多少的进行开发）。
在大多数情况下，这种方案都合理高效，虽然高度在不同宽高比的容器中可能会超出，但是通常我们的页面都可以纵向滚动，超出又何妨。但是，如果产品说这个页面不能滚呢？必须让用户一屏看完所有内容！！！
OK，之前的文章我给过方法：怼设计！
“像这种需要一屏显示完全的页面，就应该将主体内容放在安全区域啊，这样短屏不会看不到主体内容不是”
示图一
可是，设计师可也不是吃素的，分分钟怼回来：
“这么做你倒是省事了，但是在正常宽高比的手机上（例如 iphone 6/7/8），会空出来一大片，更别说在 iphone XXX 上了！”
怼是怼不过的了，那只能想办法解决，通过计算屏幕的宽高比，在短屏上动态的缩小一些间距是一种方法，不过这实在实在是太费劲了！！！
二、有无解法
既然离散的调整区域间距这么痛苦，有必要探索一个“短平快”的路径。不难发现，这类不让用户纵向滚动的页面，通常都是元素较少统一背景的运营封面，例如这样的：
示图二
正常比例屏幕，内容刚好占满，短屏中可能 Company 就看不见了：
示图三
如果在保证正常屏幕按照宽度等比适配的同时，短屏再依据高度进行一次等比缩放会怎样呢？
示图四
对主要内容的高度进行收缩，让它等于容器高度，此时宽度等比收缩，整体内容在往上收的同时，会向内挤。由于背景固定，这类运营页面往里挤一点设计师也能接受，毕竟只是针对一些变态的短屏的降级（总比超出看不到，或者拉低正常屏的体验效果进行对齐，要好百倍，毕竟短屏一般也不会短得太夸张，横向的收缩不会太明显）
三、具体落地
1）首先，正常的按照宽度等比适配的方案，该怎么实施还怎么实施，毕竟要保证正常宽高比的效果不是，我们只需要在此基础上做一个小小的加成（所以说是打补丁洛）
2）获取屏幕的宽高，比较它跟设计稿的宽高比孰大孰小（设计师一般都是按照750出的图，也就是iphone6/7/8 上的，375：667），如果
屏幕宽高比 > 设计稿宽高比
也就说，这个屏幕的高度是偏矮的（这里理解不了，自行脑补一下），这就找到了我们要处理的战场
3）保证页面主内容是有一个标签包裹的(PS: 这里不包括背景)，并且，主内容区域的高宽已经固定为设计稿的高宽
<style>
.mainContent {
width: 750px;
heigh: 1080px;
}
</style>
<body class="bg"> // 统一的背景色、背景图在这里，注意注意
<div class="mainContent"> // 主内容都被这里裹着呢
...
</div>
</body>
4）计算缩放的 Scale，对 MainContent 设置 scale
// 伪代码，不可抄、不可抄
const scale = containerHeight / mainContentHeight
if (shortScene) {
mcRef.setStyle({
transform: `scale(${scale}, ${scale})`
})
}
写完收工~~
结语
虽然文中用了不少感叹号，但是我毕竟是一个温和之人，欢迎加微信一起聊技术：facemagic2014
网友评论