CSS兼容iPhone底部小橫條

開發中我們經常會遇到一些蘋果機型有奇怪的造型，比如劉海，或者是底部的小橫條，遮住了我們的頁面內容。今天來說說如果去解決IPhone底部小橫條的問題。

 

 

 

第一：底部評論等操作面板的代碼如下（參雜着vue代碼，不熟悉也沒關系，注意"news-footer"類選擇器）

　　　　<div class="news-footer">
            <div class="news-control flex-def flex-cCenter flex-zBetween">
                <input type="button" style="text-align: left;" class="comment-btn flex-one" value="寫評論..." readonly="" @click="showComment()">
                <div class="btn-group flex-def flex-cCenter">
                    <div class="item" @click="commentClick">
                        <img class="icon" src="/static/HTML/mobile/comment-3.png?v=1">
                        <button type="button" class="num">{{reply_count <= 99 ? reply_count:'99+'}}</button>
                    </div>
                    <div class="item" @click="collectFun">
                        <img v-if="is_favorite == 1" class="icon" src="/static/HTML/mobile/favorite-3-active.png?v=1">
                        <img v-else class="icon" src="/static/HTML/mobile/favorite-3.png?v=1">
                    </div>
                    <div class="item" @click="zanFun">
                        <div class="zan-animate"></div>
                        <img class="icon" src="/static/HTML/mobile/agree-3-active.png?v=1" v-if="is_agree==1">
                        <img class="icon" src="/static/HTML/mobile/agree-3.png?v=1" v-else>
                    </div>
                </div>
            </div>
        </div>

 

第二：我們開始進行修改，在頁面頭部加上下列代碼

<meta name="viewport" content="width=device-width, viewport-fit=cover">

 

第三：樣式上我們需要再添加下列CSS代碼

.news-footer{
    padding-bottom:constant(safe-area-inset-bottom); 
    padding-bottom: env(safe-area-inset-bottom);
}

 

完成上述步驟，即可以自適應地讀出一個安全高度並擠出一個安全距離