...

前言 Iphone每次退出新尺寸的手機都會掀起一番適配風波,這次沒有下巴但有劉海的iPhoneX更是如此,網傳橫屏下的適配動畫更是令不少人汗顏. 其實對於Native App來說,適配並不算困難(當然追求酷炫效果另算),官方文檔有詳細的說明,而對於Web App來說,主要還是依靠打開 ...

一、iPhoneX適配第一步，根據iPhoneX的屏幕像素大小，引入對應的啟動圖，告訴系統，app兼容iPhoneX 　　 　　需要在launchimage中引入一張 1125*2436的png，app將默認展示支持iPhoneX的效果 二、安全區域的概念 　　所謂的安全區域是一個 ...

...

IphoneX適配正確姿勢 寫在前面 距離17年9月iphonex發布以來已經快兩年了(所以對於iphonex機型的頭部劉海(sensor housing)和底部小黑條(Home Indicator)的內容本文不在做過多贅述了)，相信還有一些同學為iphonex系列機型如何完美適配在發愁，筆者 ...

原文出處： 凹凸實驗室 前言iPhoneX 取消了物理按鍵，改成底部小黑條，這一改動導致網頁出現了比較尷尬的屏幕適配問題。對於網頁而言，頂部（劉海部位）的適配問題瀏覽器已經做了處理，所以我們只需要關注底部與小黑條的適配問題即可（即常見的吸底導航、返回頂部等各種相對底部 fixed ...

適配iPhoneX底部的小黑條 一、場景 由於iPhoneX去掉了物理按鍵，改為了底部小黑條，這就會導致屏幕適配問題，最常見的場景就是底部fixed的元素被阻擋的情況。對於這種問題，我們一般采取css或js的處理方式（適用於h5，小程序）。 二、css適配方案（推薦） 第一步 ...

　　SafeAreaView的目的是在一個“安全”的可視區域內渲染內容。具體來說就是因為目前有 iPhone X 這樣的帶有“劉海”的全面屏設備，所以需要避免內容渲染到不可見的“劉海”范圍內。本組件目 ...