iPhoneX 取消了物理按鍵，改成底部小黑條，這一改動導致網頁出現了比較尷尬的屏幕適配問題。對於網頁而言，頂部（劉海部位）的適配問題瀏覽器已經做了處理，所以我們只需要關注底部與小黑條的適配問題即可（即常見的吸底導航、返回頂部等各種相對底部 fixed 定位的元素）。筆者通過查閱了一些官方文檔 ...

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

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

...

/* iphonex適配 */ ...

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

IPhoneX全面屏是十分科技化的，但是由於其圓角和攝像頭劉海位置以及操控黑條的存在使得我們需要去對其樣式做一些適配，沒有X的同學可以開啟 Xcode 9 的iPhone X 模擬器作為學習和調試。 設計和尺寸相關 IPone型號 屏幕尺寸 屏幕密度 ...

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