此前分享過兩篇關(guān)于等比適配的文章（Viewport And Rem）狰贯，分別介紹了按照寬度進(jìn)行等比適配的兩種具體實(shí)洛搀。然而待锈，按照寬度等比適配這個(gè)方案本身并不完美宅荤，今天就來討論討論如何打上這個(gè)補(bǔ)丁
一跳仿、缺陷是什么诡渴？
既然是等比適配，那么只能以容器的一邊為基準(zhǔn)菲语，另一邊等比妄辩，通常情況我們都是以寬度進(jìn)行等比（例如，通過 Viewport 將容器寬度固化成 750山上，然后在設(shè)計(jì)稿中高效的量多少寫多少的進(jìn)行開發(fā)）眼耀。
在大多數(shù)情況下，這種方案都合理高效佩憾，雖然高度在不同寬高比的容器中可能會(huì)超出哮伟，但是通常我們的頁面都可以縱向滾動(dòng)干花，超出又何妨。但是楞黄，如果產(chǎn)品說這個(gè)頁面不能滾呢池凄？必須讓用戶一屏看完所有內(nèi)容！９砝修赞！
OK，之前的文章我給過方法：懟設(shè)計(jì)桑阶！
“像這種需要一屏顯示完全的頁面柏副，就應(yīng)該將主體內(nèi)容放在安全區(qū)域啊，這樣短屏不會(huì)看不到主體內(nèi)容不是”
可是蚣录，設(shè)計(jì)師可也不是吃素的割择，分分鐘懟回來：
“這么做你倒是省事了，但是在正常寬高比的手機(jī)上（例如 iphone 6/7/8）萎河，會(huì)空出來一大片荔泳，更別說在 iphone XXX 上了！”
懟是懟不過的了虐杯，那只能想辦法解決玛歌，通過計(jì)算屏幕的寬高比，在短屏上動(dòng)態(tài)的縮小一些間距是一種方法擎椰，不過這實(shí)在實(shí)在是太費(fèi)勁了Ｖё印！达舒！
二值朋、有無解法
既然離散的調(diào)整區(qū)域間距這么痛苦，有必要探索一個(gè)“短平快”的路徑巩搏。不難發(fā)現(xiàn)昨登，這類不讓用戶縱向滾動(dòng)的頁面，通常都是元素較少統(tǒng)一背景的運(yùn)營封面贯底，例如這樣的：
正常比例屏幕丰辣，內(nèi)容剛好占滿，短屏中可能 Company 就看不見了：
如果在保證正常屏幕按照寬度等比適配的同時(shí)禽捆，短屏再依據(jù)高度進(jìn)行一次等比縮放會(huì)怎樣呢笙什？
對(duì)主要內(nèi)容的高度進(jìn)行收縮，讓它等于容器高度睦擂，此時(shí)寬度等比收縮得湘，整體內(nèi)容在往上收的同時(shí)，會(huì)向內(nèi)擠顿仇。由于背景固定淘正，這類運(yùn)營頁面往里擠一點(diǎn)設(shè)計(jì)師也能接受摆马，畢竟只是針對(duì)一些變態(tài)的短屏的降級(jí)（總比超出看不到，或者拉低正常屏的體驗(yàn)效果進(jìn)行對(duì)齊鸿吆，要好百倍囤采，畢竟短屏一般也不會(huì)短得太夸張，橫向的收縮不會(huì)太明顯）
三惩淳、具體落地
1）首先蕉毯，正常的按照寬度等比適配的方案，該怎么實(shí)施還怎么實(shí)施思犁，畢竟要保證正常寬高比的效果不是代虾，我們只需要在此基礎(chǔ)上做一個(gè)小小的加成（所以說是打補(bǔ)丁洛）
2）獲取屏幕的寬高，比較它跟設(shè)計(jì)稿的寬高比孰大孰屑ざ住（設(shè)計(jì)師一般都是按照750出的圖棉磨，也就是iphone6/7/8 上的，375：667）学辱，如果
屏幕寬高比 > 設(shè)計(jì)稿寬高比
也就說乘瓤，這個(gè)屏幕的高度是偏矮的（這里理解不了，自行腦補(bǔ)一下）策泣，這就找到了我們要處理的戰(zhàn)場(chǎng)
3）保證頁面主內(nèi)容是有一個(gè)標(biāo)簽包裹的(PS: 這里不包括背景)衙傀，并且，主內(nèi)容區(qū)域的高寬已經(jīng)固定為設(shè)計(jì)稿的高寬
<style>
.mainContent {
width: 750px;
heigh: 1080px;
}
</style>
<body class="bg"> // 統(tǒng)一的背景色萨咕、背景圖在這里统抬，注意注意
<div class="mainContent"> // 主內(nèi)容都被這里裹著呢
...
</div>
</body>
4）計(jì)算縮放的 Scale，對(duì) MainContent 設(shè)置 scale
// 偽代碼任洞，不可抄蓄喇、不可抄
const scale = containerHeight / mainContentHeight
if (shortScene) {
mcRef.setStyle({
transform: `scale(${scale}, ${scale})`
})
}
寫完收工~~
結(jié)語
雖然文中用了不少感嘆號(hào)发侵，但是我畢竟是一個(gè)溫和之人交掏，來比一比：
