一、media query方式
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | @media only screen and (device- width : 375px ) and (device- height : 812px ) and (-webkit-device-pixel-ratio: 3 ) {
.fixed- bottom {
bottom : 37px ;
}
}
@media only screen and (device- width : 414px ) and (device- height : 896px ) and (-webkit-device-pixel-ratio: 3 ) {
.fixed- bottom {
bottom : 37px ;
}
}
@media only screen and (device- width : 414px ) and (device- height : 896px ) and (-webkit-device-pixel-ratio: 2 ) {
.fixed- bottom {
bottom : 37px ;
}
}
|
登入後複製
存在的問題:在微信webveiw內部此方案能在元素底部加上安全區域寬度,沒有問題。但在safari等有底欄的瀏覽器(頁面顯示區域已經在安全區內部)也同樣會加上安全區寬度。
(影片教學:css影片教學)
二、CSS函數
蘋果在推出全面螢幕之後提供的CSS函數,ios<11.2為constant(),ios>11.2為env()。可填入safe-area-inset-top、safe-area-inset-left、safe-area-inset-right、safe-area-inset-bottom對應上下左右的安全區域寬度。 env 和 constant 只有在 viewport-fit=cover 時候才能生效。
程式碼如下:
meta標籤加入viewport-fit=cover
1 | <meta name= "viewport" content= "width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover" >
|
登入後複製
css寫法,不支援env、constant的瀏覽器會忽略此樣式
1 2 3 4 5 | .fixed- bottom {
bottom : 0 ;
bottom : constant(safe-area-inset- bottom );
bottom : env(safe-area-inset- bottom );
}
|
登入後複製
推薦教學:CSS入門基礎教學
以上是css如何實現適配iphone全面屏的詳細內容。更多資訊請關注PHP中文網其他相關文章!