最快速的iphonex適配方案

shooke發表於2017-11-15
iPhone

iphonex出來了，蘋果一出手，業界勢必會有變動，這次也一樣。iphonex的出現又給大家添堵了。秉著不讓使用者添堵的原則，我們還是要適配的。
下面說說適配的方案，其實最基本的思路就是避開上下兩塊區域，只在安全區域顯示內容。

最直接的方案

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>iphonex</title>
    <meta content="width=device-width,maximum-scale=1.0,initial-scale=1.0,minimum-scale=1.0,user-scalable=yes" name="viewport">
    <style>
        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>
</head>
<body>
<div class="top"></div>
<div class="content">sfsd</div>
<div class="bottom"></div>
</body>
</html>複製程式碼

進化方案

上面的方式很明顯，適合初始開發那麼已經做了開發的現有專案應該怎麼快速適配呢，根據上面的思路我寫了個比較通用的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檔案

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>iphonex</title>
    <meta content="width=device-width,maximum-scale=1.0,initial-scale=1.0,minimum-scale=1.0,user-scalable=yes" name="viewport">
    <link rel="stylesheet" href="iphonex.css">

</head>
<body class="iphonex">
你自己的頁面內容
</body>
</html>複製程式碼

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

相關文章