手淘Web頁面Bar和縱向適配的設計
記得在去年雙11的互動頁面中，我們折騰了一波 ofollow,noindex" target="_blank">iPhone8、iPhone8 plus和iPhone X的適配 ，特別是 iPhone X劉海區域的適配 。針對這方面的頁面適配，沉澱出相應的適配方案。而今年的雙11期間，蘋果又推出了iPhone XS、iPhone XR和iPhone XR Max以及眾多的安卓劉海裝置。言外之意，前端在這方面的適配變得越來越複雜。面對眾多場景，我們應該怎麼去面對呢？接下來聊聊我在今年雙11的主互動玩法中是怎麼處理的。
面對的場景
在雙11主互動玩法（最近手淘熱門活動） 雙11合夥人 組隊PK人氣 集能量瓜分10億紅包 。這是一個純Web頁面，在整個活動頁面中有兩個場景的適配是較為蛋疼的。首先就是頁頭和頁尾的位置適配。
由於劉海機的增加，頂部和底部的 安全區域 成為不定因素，所以這一部分面對的難度和不定因素也變多。稍後我們會深度的剖析這部分從設計到開發應該怎麼來處理。
另外一個場景是縱向（垂直）方向的適配。
其實縱向的適配一直是全屏模式的一種痛點。在不同高度的終端上如果要達到一樣的效果，實現成本是非常高的。至少目前的各種方案都存在這樣的問題。
線上最終效果
先來看看養眼的高階機iPhone X 和 iPhone XS Max:
再來看看普通的iPhone裝置（iPhone6, iPhone6+, iPhone7+,iPhone8），我身邊的裝置都跑了一圈：
最後來看看眾生相的安卓裝置（我只是截取了部分）：
是不是頓時感覺前端苦逼。
理解設計
前面的都是一些前奏，似乎有點長，但不要緊，接下來我們進入正題。
在開始編碼之前，理解設計是非常的重要，特別是在這樣的複雜場景（主要說的是複雜的適配場景）。整個專案的設計無法一一來進行剖析，這裡就拿兩個特別之處。因為我們要解的是Web頁面的Bar，頂部Bar和底部的Bar。先上一張圖：
優秀的設計師會給我提供多種狀態，或者告訴我不同狀態的尺寸。比如分享的頁面，其底部就具備兩種尺寸：
短屏下是尺寸是 750px * 315px ，理解成iPhoneX裝置之下，都採用的是這個尺寸，當然背景圖片也是如此；另外一個尺寸是 750px * 448px ，對應iPhone X及新出的iPhone XS/XR/XS Max。事實上這樣的理解並不完全正確，因為有一些安卓的裝置也具備類似於iPhone X的尺寸或更大的尺寸。暫時先忽略這個現象吧。
另外就是頁面的頂部Bar和底部Bar的尺寸了。在iPhone X的設計中，頂部Bar的高是 128px （設計師告訴我頂部Bar有兩種尺寸，iPhone X以下的是 128px ，iPhone X 及其他帶劉海的裝置尺寸是 176px ），底部Bar尺寸是 200px 。
做過iPhone X 適配，都知道有安全區域一說，或者說頂部劉海和底部Home鍵的位置（大小），但對於新出來的裝置（不管是iOS系列還是Android系列）有好多的不確定。就算是拋開這些新裝置，也面臨著不少的問題。比如說Bar的尺寸，應該怎麼確定，是不是跟著設計稿走就行；縱向佈局應該怎麼處理短屏和高屏。這一切的一切對於前端來說，在不同的專案中都會有未知的問題出現。那麼問題來了，我們可以通過設計的標準或者說技術的手段來規避嗎？
在我的理解中應該是可以的。為什麼這麼說呢？我們先來理解設計的標準（不同的裝置出現，他都有一套完成的設計標準）。在接下來的內容我們以iOS系列為依據來做判斷，因為安卓我真心的懼怕，也沒有抽出那麼多的時間一款款的測試（這對於做技術的而言是不好的一點）。
理解標準
理解標準需要具備一些基礎，比如說一些術語的描述，如果你感興趣的話，建議你移步閱讀一下《移動端上的設計和適配》一文。如果沒有這些基礎也不會太防礙你繼續往下閱讀。
在蘋果釋出新款裝置的時候，不管是設計師還是前端開發，都急切的想知道這些裝置的各種引數，比如說解析度、PPI之類的。
這裡給大家特別推薦一個 網站Vizdevices ，可以讓大家輕易的獲取有關於主流移動裝置的各項引數。比如下面的截圖：
估計大家更為關心的是如何在專案中適配： 切幾倍的圖 、 用幾倍的尺寸 和 劉海怎麼適配（新機是不是和iPhoneX一樣） 等等。到目前為止，最起碼在這個專案中，前端和視覺設計師約定的尺寸還是以 750px 寬度：
而且我們構建工具中有關於單位之間的轉換依舊約定的還是以 750px 為基礎。也就是說目前主流還是以 @2x 為基準做設計稿，然後提供 @2x 圖給前端，當然也有的設計師會額外提供 @3x 的切圖給到開發人員。
手機適配採用幾倍圖與 PPI 有關係，也就是 畫素密度 ，所以我們可以理解為什麼iPhone4、5、6之間解析度和螢幕尺寸不一樣，但是同樣採用 @2x 圖的原因，是因為它們有同樣的 PPI（ 326ppi ） 。但新款的裝置就不一樣了：
從上圖中我們可以獲知，iPhone XS與iPhone X的資料是一致的。因此我們可以得出iPhone XS可以像iPhone X一樣，提供 @3x 的尺寸：
而iPhone XS Max的PPI和iPhone X/XS是一樣的，都是 458PPI ，只是其解析度和Viewport要更大。由此可以推論出iPhoneXs Max使用的同樣是三倍圖 @3x 。
從螢幕（Viewport）寬高比例來看：
- iPhoneXS Max寬度
1242/3=414pt，iPhone8 Plus寬度1242/3=414pt，兩者的寬度一致 - iPhoneXS Max高度
2688/3=896pt，iPhone8 Plus高度2208/3=736pt；
iPhoneXS Max比iPhone8 Plus長一截，多了 160pt 。
因此，我們這次的設計，iPhoneXS Max也跟著iPhone X走的：
接著我們最後來看iPhone XR這款裝置。其PPI是 326 ，解析度為 828px * 1792px ，螢幕寬度比為： 414px * 896px 。而iPhone其他款裝置，比如iPhone 7 Plus、iPhone 7，甚至iPhone 5，它們的PPI都是 326 。也就是說iPhoneXR與蘋果二倍圖的PPI是一致。如此就可以推論出iPhoneXR使用的是二倍圖 @2x 。
同樣從頁面寬高比例來看：
- iPhoneXR寬度
828/2=414pt，iPhoneXS Max寬度1242/3=414pt； - iPhoneXR高度
1792/2=896pt，iPhoneXS Max高度2688/3=896pt；
如果你夠仔細的話，不難發現，從裝置的寬度（Viewport）比來看，iPhoneXR 和 iPhoneXS Max是一樣的，如下圖所示：
對於設計和開發而言，他們不同之處就是iPhoneXR使用的是 @2x 圖或尺寸，而iPhoneXS Max是 @3x 圖或尺寸：
上面就是有關於蘋果新機和老裝置之間的差異。但這僅僅是iOS系列，我們還需要面對的是複雜的Android系列，但這一塊在這篇文章不做過多闡述，因為我目前還不具備方面能力，能把這裡面的故事說清楚。
有了這些基礎和概念，我們就可以繼續下一步的探討了。
這些新尺寸對我們Web頁面的設計和佈局有何影響？如何去適配？
其實這才是我們一線開發人員最為關心的東西。
蘋果自從iOS11開始，丟擲一個安全區域的概念（其實現在安卓劉海機也有安全區域存在）。對於Web頁面設計和開發都有必要對這一概念有所瞭解。那先花一點時間來了解一下安全區域，如果你對這方面很熟悉，你可以跳過這一節，繼續往下閱讀。
安全區域
安全區域(Safe Area)，一個熟悉又陌生的詞語。
熟悉是因為在平面設計中，由於印刷裁切過程中的誤差，設計師需要給設計稿預留出「出血」 位置，確保設計內容在安全區域中；陌生又是因為在網際網路設計中已極少被提及。
這裡指的安全區域不僅僅針對於iOS的裝置，只不過以iOS裝置為例。所以這裡所指的裝置安全區域指的是螢幕內適合放置控制元件的安全區域。
在沒有狀態列和其他東西的 iPhone 8 裡，Safe Area 是指整個螢幕。
當加入狀態列後，Safe Area 便向下減少了 20pt 。當我們加入 Navigation 的時候，Safe Area 又減少了 44pt 。同理，我們再加入 Tabbar 的時候，Safe Area 又減少了 44pt （PS：此處更正， Tabbar 高度應該是 49pt ）。
在 iPhone X 裡，當我們沒有使用狀態列時，Safe Area 依然和上下邊有一定的距離。按照我的測量，此時距離底部應該是 43pt ，距離頂部應該是 44pt 。
同理，加入不同 Bar 之後，iPhone X 的 Safe Area 都會有相應的變化。
後續設計中，iPhone XS/XR/XS Max可以按這個距離做為設計依據。
遵守 Safe Area (安全區域) 的界定
拿蘋果官網針對於iPhone X的安全區域來舉例。
狀態列。遵守安全區域的界定，在狀態列下面留出適當的空間。避免為狀態列高度預設值，這可能會導致您的內容被狀態列遮擋或形成錯位。
圓弧展示角和感測器槽。您的 App 的內容元素和控制按鍵應避開螢幕角落和感測器槽，讓其在填滿螢幕的同時不被角落切割。
主螢幕指示器。為使 App 的內容和控制元件始終保持清晰可見且便於點按，請確保您的 App 不會干擾主螢幕指示器。
螢幕邊緣手勢。iPhone X 顯示屏利用螢幕邊緣手勢來訪問主螢幕，App 切換器，通知和控制中心。請避免對這些手勢造成干擾。您可將控制元件移到安全區域並調整使用者介面。極少數情況下，您可以考慮使用邊緣保護：使用者的首個滑動手勢將被視為 App 內的特定手勢，第二次滑動才會被視為系統手勢。
確保您的程式碼能適應不同的螢幕寬高比。許多 App 會根據特定的寬度，高度或寬高比來定位其內容。請檢查您的內容是否已正確縮放並定位。
調整視訊的縮放度。iPhone X 上的視訊內容應填滿螢幕。但是，如果這導致頂部或底部被切割，或側面裁剪太多，則應將視訊拉伸或縮小以配合螢幕。當 AVPlayerViewController 自動管理時，基於 AVPlayerLayer 的自定義視訊播放器需要選擇適當的初始視訊重力設定，並允許使用者根據自己的喜好在 aspect (固定寬高比) 和 aspectFill (固定寬高比且全屏) 觀看模式之間進行切換。
