成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專(zhuān)欄INFORMATION COLUMN

H5移動(dòng)端適配IphoneX等機(jī)型

happyfish / 3081人閱讀

摘要：先來(lái)看下機(jī)型的樣子上圖中，機(jī)型在頭部和底部新增了這兩個(gè)區(qū)域，所以我們需要針對(duì)這類(lèi)機(jī)型做些適配，方便我們的的展示做成的移動(dòng)端頁(yè)面，常見(jiàn)布局為頭部軀干底部三欄模式，頭部和頂部都是固定定位，軀干可里的內(nèi)容可以滾動(dòng)，暫定的布局如下但如果沒(méi)采用機(jī)型的

先來(lái)看下iPhone X機(jī)型的樣子

上圖中，Iphonex機(jī)型在頭部和底部新增了這兩個(gè)區(qū)域，所以我們需要針對(duì)這類(lèi)機(jī)型做些適配，方便我們的webapp的展示
h5做成的移動(dòng)端頁(yè)面，常見(jiàn)布局為頭部+軀干+底部三欄模式，頭部和頂部都是固定定位，軀干可里的內(nèi)容可以滾動(dòng)，暫定的布局如下：

但如果沒(méi)采用IphoneX機(jī)型的新的css屬性，而直接采用position: fixed;top：0等常規(guī)寫(xiě)法，就會(huì)出現(xiàn)頭部的導(dǎo)航欄被手機(jī)自帶的狀態(tài)欄(顯示電量信號(hào)等等)遮擋的情況，底部的導(dǎo)航欄被IphoneX自帶的呼吸燈(圖中手機(jī)底部的白條)遮擋的情況，給用戶(hù)的操作和體驗(yàn)帶來(lái)困擾，目前針對(duì)這類(lèi)問(wèn)題，根據(jù)自己做過(guò)的項(xiàng)目，整理了一下幾種解決方案
我使用的是vue框架，在index.html頁(yè)面,我們需要添加

然后，在公共的app.vue頁(yè)面，我們每個(gè)組件的展示，都是在這里被router-view替換，所以可以在這里處理一下公共的頭部頂欄，具體的布局如下：

上面的布局中，我們給class為placeholder_top的div寫(xiě)下如下：

.placeholder_top {
  position: fixed;
  top: 0;
  left: 0;
  width: 10rem;
  background-color: #303030;
  height: constant(safe-area-inset-top);
  height: env(safe-area-inset-top);
  z-index: 999;
}

這樣的話(huà)，我們后續(xù)，多帶帶的組件，就不用再處理這個(gè)頂部欄的問(wèn)題，那下面，我們就可以處理下前面提到的頭部問(wèn)題，一般頭部，我們大多都會(huì)封裝成公共組件，所以在這里，因?yàn)槭艿轿覀冊(cè)赼pp.vue頁(yè)面插入的那個(gè)元素的影響，我們的頭部的css寫(xiě)法，也需要略微改動(dòng)下，頭部組件頁(yè)面布局如下：

頁(yè)面的css為：

header{
background-color: #303030;
    .title{
    position: fixed;
    top:0;
    top: constant(safe-area-inset-top);
    top: env(safe-area-inset-top);
    left: 0;
    height：88px;
    z-index: 999;
    }
    .placeholder{
    height: 88px;
    width: 10rem;
    }
}

這樣寫(xiě)，這個(gè)頭部導(dǎo)航欄就會(huì)位居于手機(jī)狀態(tài)欄之下了，不會(huì)影響到視窗，并且能兼容安卓和ios機(jī)型(這類(lèi)兼容問(wèn)題，還涉及到ios的系統(tǒng)問(wèn)題，不過(guò)本文暫未涉及)
下面再來(lái)看下main區(qū)域的處理，因?yàn)樯厦鎕eader組件已經(jīng)處理好了，所以main直接如下布局：

  main {
padding-top: constant(safe-area-inset-top);
padding-top: env(safe-area-inset-top);
padding-bottom: calc(88px + constant(safe-area-inset-bottom));
padding-bottom: calc(88px + env(safe-area-inset-bottom));

ps:這里說(shuō)明一下，下面的兩行，是用在當(dāng)前頁(yè)面沒(méi)有底部導(dǎo)航欄的情況

padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);

}，

main里面布局好了，直接寫(xiě)內(nèi)容就可以了，
然后在看下底部的footer布局

底部?jī)?nèi)容的css如下：

footer{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 10rem;
    height: calc(88px + constant(safe-area-inset-bottom));
    height: calc(88px + env(safe-area-inset-bottom));
    background-color: #303030;
    .foot{
    position: absolute;
    top:0;
    left: 0;
    width: 10rem;
    height: 88px;
    }
}

這樣寫(xiě)，底部導(dǎo)航foot里的內(nèi)容，就不會(huì)被手機(jī)自帶的呼吸燈所遮擋

所以可以總結(jié)一下，我們?cè)谶@種webapp適配中，可能需要采用的css寫(xiě)法如下：
    position: fixed;
    top: constant(safe-area-inset-top);
    top: env(safe-area-inset-top);
    bottom: constant(safe-area-inset-bottom);
    bottom: env(safe-area-inset-bottom);
    top: calc(1rem + constant(safe-area-inset-top));
    top: calc(1rem + env(safe-area-inset-top));
    bottom: calc(1rem + constant(safe-area-inset-bottom));
    bottom: calc(1rem + env(safe-area-inset-bottom));
ps:在上面的寫(xiě)法中，有寫(xiě)到:style="{position:fixposition?"absolute":"fixed"}"，這個(gè)是為了解決用戶(hù)點(diǎn)擊輸入框，彈出軟鍵盤(pán)時(shí)，這類(lèi)固定元素的定位不準(zhǔn)的問(wèn)題，感興趣的可以研究下，本文暫不討論
這里可以根據(jù)實(shí)際需求來(lái)采用不同的寫(xiě)法，大體布局邏輯建議不要偏差太大，這樣寫(xiě)是為了統(tǒng)一處理，方便維護(hù)，另外如果有真機(jī)測(cè)試，發(fā)現(xiàn)布局兼容導(dǎo)致的樣式問(wèn)題，可以采用真機(jī)調(diào)試方法，用pc端瀏覽器調(diào)試webapp，審查元素，那樣基本能解決大部分樣式問(wèn)題，關(guān)于真機(jī)調(diào)試，下回寫(xiě)

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/114858.html

相關(guān)文章

  • H5移動(dòng)端適配IphoneX等機(jī)型

    摘要：先來(lái)看下機(jī)型的樣子上圖中，機(jī)型在頭部和底部新增了這兩個(gè)區(qū)域，所以我們需要針對(duì)這類(lèi)機(jī)型做些適配，方便我們的的展示做成的移動(dòng)端頁(yè)面，常見(jiàn)布局為頭部軀干底部三欄模式，頭部和頂部都是固定定位，軀干可里的內(nèi)容可以滾動(dòng)，暫定的布局如下但如果沒(méi)采用機(jī)型的 先來(lái)看下iPhone X機(jī)型的樣子 showImg(https://segmentfault.com/img/bVbugGA?w=297&h=60...

    MoAir 評(píng)論0 收藏0

  • multipages-generator今日發(fā)布?！媽媽再也不用擔(dān)心移動(dòng)端h5網(wǎng)站搭建了！

    摘要：本文適合的讀者現(xiàn)在在手淘，京東，今日頭條，美柚等過(guò)億用戶(hù)的手機(jī)中的，都常見(jiàn)網(wǎng)頁(yè)，他們有更新快，靈活，便于分享和傳播的特性。這里有他們中的幾個(gè)的例子手淘，美柚。 本文適合的讀者??????? 現(xiàn)在在手淘，京東，今日頭條，美柚等過(guò)億用戶(hù)的手機(jī)app中的，都常見(jiàn)h5網(wǎng)頁(yè)，他們有更新快，靈活，便于分享和傳播的特性。這里有他們中的幾個(gè)h5的例子：（手淘，美柚）。這些app中都嵌者數(shù)以百計(jì)，千計(jì)的...

    xavier 評(píng)論0 收藏0

  • multipages-generator今日發(fā)布?！媽媽再也不用擔(dān)心移動(dòng)端h5網(wǎng)站搭建了！

    摘要：本文適合的讀者現(xiàn)在在手淘，京東，今日頭條，美柚等過(guò)億用戶(hù)的手機(jī)中的，都常見(jiàn)網(wǎng)頁(yè)，他們有更新快，靈活，便于分享和傳播的特性。這里有他們中的幾個(gè)的例子手淘，美柚。 本文適合的讀者??????? 現(xiàn)在在手淘，京東，今日頭條，美柚等過(guò)億用戶(hù)的手機(jī)app中的，都常見(jiàn)h5網(wǎng)頁(yè)，他們有更新快，靈活，便于分享和傳播的特性。這里有他們中的幾個(gè)h5的例子：（手淘，美柚）。這些app中都嵌者數(shù)以百計(jì)，千計(jì)的...

    Kerr1Gan 評(píng)論0 收藏0

  • multipages-generator今日發(fā)布?！媽媽再也不用擔(dān)心移動(dòng)端h5網(wǎng)站搭建了！

    摘要：本文適合的讀者現(xiàn)在在手淘，京東，今日頭條，美柚等過(guò)億用戶(hù)的手機(jī)中的，都常見(jiàn)網(wǎng)頁(yè)，他們有更新快，靈活，便于分享和傳播的特性。這里有他們中的幾個(gè)的例子手淘，美柚。 本文適合的讀者??????? 現(xiàn)在在手淘，京東，今日頭條，美柚等過(guò)億用戶(hù)的手機(jī)app中的，都常見(jiàn)h5網(wǎng)頁(yè)，他們有更新快，靈活，便于分享和傳播的特性。這里有他們中的幾個(gè)h5的例子：（手淘，美柚）。這些app中都嵌者數(shù)以百計(jì)，千計(jì)的...

    doodlewind 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<