等比適配的最後一個補丁

時間 2019-11-30

標籤等比適配最後一個補丁简体版

原文原文鏈接

此前分享過兩篇關於等比適配的文章（Viewport And Rem），分別介紹了按照寬度進行等比適配的兩種具體實。然而，按照寬度等比適配這個方案自己並不完美，今天就來討論討論如何打上這個補丁css

1、缺陷是什麼？

既然是等比適配，那麼只能以容器的一邊爲基準，另外一邊等比，一般狀況咱們都是以寬度進行等比（例如，經過 Viewport 將容器寬度固化成 750，而後在設計稿中高效的量多少寫多少的進行開發）。html

在大多數狀況下，這種方案都合理高效，雖然高度在不一樣寬高比的容器中可能會超出，可是一般咱們的頁面均可以縱向滾動，超出又何妨。可是，若是產品說這個頁面不能滾呢？必須讓用戶一屏看完全部內容！！！安全

OK，以前的文章我給過方法：懟設計！「像這種須要一屏顯示徹底的頁面，就應該將主體內容放在安全區域啊，這樣短屏不會看不到主體內容不是」 bash

但是，設計師可也不是吃素的，分分鐘懟回來：「這麼作你卻是省事了，可是在正常寬高比的手機上（例如 iphone 6/7/8），會空出來一大片，更別說在 iphone XXX 上了！」

懟是懟不過的了，那隻能想辦法解決，經過計算屏幕的寬高比，在短屏上動態的縮小一些間距是一種方法，不過這實在實在是太費勁了！！！微信

2、有無解法

既然離散的調整區域間距這麼痛苦，有必要探索一個「短平快」的路徑。不難發現，這類不讓用戶縱向滾動的頁面，一般都是元素較少統一背景的運營封面，例如這樣的： iphone

正常比例屏幕，內容恰好佔滿，短屏中可能 Company 就看不見了：

若是在保證正常屏幕按照寬度等比適配的同時，短屏再依據高度進行一次等比縮放會怎樣呢？ post

對主要內容的高度進行收縮，讓它等於容器高度，此時寬度等比收縮，總體內容在往上收的同時，會向內擠。因爲背景固定，這類運營頁面往裏擠一點設計師也能接受，畢竟只是針對一些變態的短屏的降級（總比超出看不到，或者拉低正常屏的體驗效果進行對齊，要好百倍，畢竟短屏通常也不會短得太誇張，橫向的收縮不會太明顯）

3、具體落地

1）首先，正常的按照寬度等比適配的方案，該怎麼實施還怎麼實施，畢竟要保證正常寬高比的效果不是，咱們只須要在此基礎上作一個小小的加成（因此說是打補丁洛）spa

2）獲取屏幕的寬高，比較它跟設計稿的寬高比孰大孰小（設計師通常都是按照750出的圖，也就是iphone6/7/8 上的，375：667），若是設計

屏幕寬高比 > 設計稿寬高比
複製代碼

也就說，這個屏幕的高度是偏矮的（這裏理解不了，自行腦補一下），這就找到了咱們要處理的戰場3d

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})`
    })
  }
複製代碼

寫完收工~~