ios開發教程之iphonex適配問題解析，iosiphonex

ios開發教程之iphonex適配問題解析，iosiphonex

iphone又一次顛覆了行業，每次都是如此的任性，每次出個問題都要消費者買單。這次最需要買單的是設計師。iphonex這貨硬體上出了個留海，軟體上又出了個底部手柄。說實話示範起來很酷炫，適配起來就有點苦逼了。
下面說集中適配的方案，其實最基本的思路就是避開上下兩塊地區，只在安全區域顯示內容。

最簡單的方案

上下使用固定定位，上面用黑色吧44px高度，固定住，下面呢用34px固定住。內容展示方面body也設定一下padding。

<meta charset="UTF-8" /><title></title><meta content="width=device-width,maximum-scale=1.0,initial-scale=1.0,minimum-scale=1.0,user-scalable=yes" name="viewport" /><style type="text/css">body{padding-top:44px;padding-bottom: 34px;}        .top{position: fixed;width:100%;height:44px;background-color: #000;top:0;left: 0;}        .bottom{position: fixed;width:100%;height:34px;bottom:0;left: 0;}</style>

sfsd

進化方案

上面的方式很明顯，適合初始開發那麼已經做了開發的現有項目應該怎麼快速適配呢，根據上面的思路我寫了個比較通用的css，只需要將css引入，給body增加這個class就可以了。css中根據解析度做了篩選，所以不會影響現有的其他裝置適配。
iphonex.css

@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {            .iphonex{padding-top:44px;padding-bottom: 34px;}            .iphonex:before{content:'';display:block;position: fixed;width:100%;height:44px;background-color: #000;top:0;left: 0;z-index:9999;}            .iphonex:after{content:'';display:block;position: fixed;width:100%;height:34px;bottom:0;left: 0;z-index:9999;}        }  

html檔案

<meta charset="UTF-8" /><title></title><meta content="width=device-width,maximum-scale=1.0,initial-scale=1.0,minimum-scale=1.0,user-scalable=yes" name="viewport" /><link href="iphonex.css" rel="stylesheet" /你自己的頁面內容

注意：如果你頁面裡面已經存在定位,可能需要自己調整一下，原有元素的定位。

其他思路

大體上思路就是讓上下空出來，實現的方式還有很多，比如運用絕對位置，或者js等等。