欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vant如何自定義組件適配iphone底部安全區(qū)

 更新時(shí)間：2024年03月14日 10:14:42   作者：超喜歡你呦  
這篇文章主要介紹了Vant如何自定義組件適配iphone底部安全區(qū)問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

場(chǎng)景

  • IM

問題

聊天界面輸入框在iphone下被底部指示條遮蓋

如下圖：

解決方案

參考 Vant 內(nèi)置組件適配方案

Vant文檔：https://vant-contrib.gitee.io/vant/#/zh-CN/advanced-usage

Vant 內(nèi)置組件中添加了 safe-area-inset-bottom 屬性，即是在css中添加對(duì)應(yīng)樣式

iOS11 的新增特性，Webkit 的 CSS 函數(shù)，用于設(shè)定安全區(qū)域與邊界的距離

它有四個(gè)預(yù)定義的變量：

  • safe-area-inset-left：安全區(qū)域距離左邊邊界距離
  • safe-area-inset-right：安全區(qū)域距離右邊邊界距離
  • safe-area-inset-top：安全區(qū)域距離頂部邊界距離
  • safe-area-inset-bottom：安全區(qū)域距離底部邊界距離

第一步：在 index.html 的 head 標(biāo)簽中加入以下 meta：

<meta
  name="viewport"
  content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover"
/>

第二步：在項(xiàng)目 index.css 中添加下列樣式：

/**
 * 適配 iphone 底部安全區(qū)（指示條，配合index.html <meta name="viewport" ... />使用
 */
@supports (bottom: env(safe-area-inset-bottom)){
    #app {
        padding-bottom: constant(safe-area-inset-bottom);
        padding-bottom: env(safe-area-inset-bottom);
    }
}

@supports 是CSS3新引入的規(guī)則之一

主要用于檢測(cè)當(dāng)前瀏覽器是否支持某個(gè)CSS屬性并加載具體樣式

大功告成~

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論