和往常一樣，蘋果發布新產品，我們作為開發者都需要對系統和ui布局進行適配，今年也是一樣。從去年發布的 iphonex開始，iphone 手機加入了劉海設計，而且針對於iphone的劉海，需要特殊的適配。今年新出的3款iphone都帶有劉海，自然也不例外。
在iphonex以前iphone的頂部gxqcfdp導航欄高度都是統一的64，底部導航欄是統一的49；從iphonex的劉海屏開始，出了乙個safearea的概念，帶劉海設計的iphone，頂部導航的高度由原來的64，變成了88，因為狀態列的高度由原來的20變成了44；底部導航欄的高度由原來的49，變成了83。
所以對於iphonex序列的手機的適配，都需要針對頂部導航&底部導航進行適配。只不過原來判斷iphonex的方法，已經不能完全判斷新的iphonex新機型。要麼繼續加if{}else{}進行判斷，要麼就是尋找新的方法，還好iphonex序列的機型的寬高比是有規律的。
從網上看到了別人的帖子列出了iphonex序列機型的寬高&比例：
//iphonex 序列機型的螢幕高寬
//xsm screen_heightl = 896.000000,screen_widthl = 414.000000 2.1642512077
//xs screen_heightl = 812.000000,screen_widthl = 375.000000 2.1653333333
//xr screen_heightl = 896.000000,screen_widthl = 414.000000 2.1642512077
//x screen_heightl = 812.000000,screen_widthl = 375.000000 2.1653333333
iphonex序列ios原生的適配
#define screen_heightl [uiscreen mainscreen].bounds.size.height
#define screen_widthl [uiscreen mainscreen].bounds.size.width
#define kisiphonex ((int)((screen_heightl/screen_widthl)*100) == 216)?yes:no
//判斷是否為 iphonexs max，iphonexs，iphonexr，iphonex
react-native針對於iphonex序列機型的適配
const = dimensions.get('window');
//iphonex 序列機型的螢幕高寬
//xsm screen_heightl = 896.000000,screen_widthl = 414.000000 2.1642512077
//xs screen_heightl = 812.000000,screen_widthl = 375.000000 2.1653333333
//xr screen_heightl = 896.000000,screen_widthl = 414.000000 2.1642512077
//x screen_heightl = 812.0000程式設計客棧00,screen_widthl = 375.000000 2.1653333333
gxqcfdp//目前iphone x序列手機的適配演算法：高寬比先轉www.cppcns.com換為字串，擷取前三位，轉換為number型別 再乘以100
export const isiphonex = (platform.os === 'ios' && (number(((height/width)+"").substr(0,4)) * 100) === 216);
總結無論是ios原生還是react-native，只要判斷出是iphonex序列機型，針對頂部導航欄和底部導航欄做特殊的處理即可。保證頂部導航和底部導航的ui正確顯示，能夠正確響應事件。（如果適配不好，會出現ui顯示不正確和事件不能夠響應的情況。）
本文標題: iphonex 序列適配方案(小結)
本文位址:
H5 iphoneX適配方案
h5 iphonex適配方案,原理是找到iphone x螢幕高度，用 查詢控制html加上頭部，底部的區間，避開異性區域。less media only screen and device width 375px and device height 812px and webkit device p...
HTML 適配方案
標準適配方案 meta vp tab 快捷方式 示例 內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容 內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容 內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容 ...
16 9適配方案
1 移動端自適應布局 按我的理念來看，移動端自適應布局中，最常用的應該算是rem為單位的基準點布局了吧。而在rem的布局中，其實最重要的點是，如何來計算這個html的font size的大小。還有一些不是需要那麼細緻的處理，也可以直接使用css的media屬性，根據元素的寬度進行設定html元素的f...