亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

手機(jī)軟鍵盤(pán)彈起導(dǎo)致頁(yè)面變形的一種解決方案

X_AirDu / 2324人閱讀

摘要：最近用一種第三方開(kāi)發(fā)框架開(kāi)發(fā)，其中一個(gè)頁(yè)面有十幾個(gè)輸入框，在點(diǎn)擊輸入時(shí)，軟鍵盤(pán)彈起，導(dǎo)致頁(yè)面往上頂，底部的按鈕也全部彈到頁(yè)面上面去了，布局全被打亂。等輸入完，軟鍵盤(pán)收起時(shí)，頁(yè)面恢復(fù)原狀。

最近用 uniapp（一種第三方 app 開(kāi)發(fā)框架） 開(kāi)發(fā) app，其中一個(gè)頁(yè)面有十幾個(gè) input 輸入框，在點(diǎn)擊 input 輸入時(shí)，軟鍵盤(pán)彈起，導(dǎo)致頁(yè)面往上頂，底部的按鈕也全部彈到頁(yè)面上面去了，布局全被打亂。

原來(lái)的樣子：

軟鍵盤(pán)彈出來(lái)后：

在開(kāi)發(fā)APP時(shí)，通常情況下頁(yè)面的寬度和高度都會(huì)設(shè)為 100%，即頁(yè)面高度等于屏幕高度，頁(yè)面寬度等于屏幕寬度。
當(dāng) input 獲取焦點(diǎn)時(shí)，軟鍵盤(pán)彈出，頁(yè)面高度被擠壓，此時(shí)頁(yè)面高度 = 屏幕高度 - 軟鍵盤(pán)高度。所以，頁(yè)面高度縮小，元素都擠壓在一起，布局被打亂。

一種可行的解決方案：給頁(yè)面設(shè)置一個(gè)最小高度，即一個(gè)能讓所有元素按原來(lái)布局排列的高度。

舉例：

我開(kāi)發(fā)的 APP 運(yùn)行在 ipad上，橫屏顯示時(shí)，高度為 768px ，我可以把 768px 當(dāng)做頁(yè)面的最小高度。

.app {
    min-height: 768px;
    /* 原來(lái)定義的高度 100% */
    height: 100vh;
}


軟鍵盤(pán)還是會(huì)彈起，因?yàn)轫?yè)面最小高度被設(shè)為了 768px，所以此時(shí)總高度為 768px + 軟鍵盤(pán)高度，超出了屏幕高度（ipad橫屏屏幕高度為768px）。如上圖所示，此時(shí)原來(lái)頁(yè)面的上半部分“消失”，就是被頂上去了，只顯示原來(lái)頁(yè)面的下半部分。但至少我們要的頁(yè)面布局不變形已經(jīng)實(shí)現(xiàn)了。等輸入完，軟鍵盤(pán)收起時(shí)，頁(yè)面恢復(fù)原狀。

ipad 的問(wèn)題解決了，要是 APP 運(yùn)行在其他手機(jī)端上呢？此時(shí)，CSS3 @media 屬性就排上用場(chǎng)了。
假設(shè)要適配 iphone5 和 iphone6

/* iphone5 width:320; height:568*/
@media (min-width: 320px) {
    .app {
        min-height: 568px;
        height: 100vh;
    }
}
/* iphone6 width:375; height:667*/
@media (min-width: 375px) {
    .app {
        min-height: 667px;
        height: 100vh;
    }
}

這樣設(shè)置即可適配 iphone5 和 iphone6

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/103778.html

相關(guān)文章

  • 可能這些是你想要的H5軟鍵盤(pán)兼容方案

    摘要：然而，并沒(méi)有直接監(jiān)聽(tīng)軟鍵盤(pán)的原生事件，只能通過(guò)軟鍵盤(pán)彈起或收起，引發(fā)頁(yè)面其他方面的表現(xiàn)間接監(jiān)聽(tīng)，曲線救國(guó)。軟鍵盤(pán)收起表現(xiàn)觸發(fā)輸入框以外的區(qū)域時(shí)，輸入框失去焦點(diǎn)，軟鍵盤(pán)收起?？梢宰屲涙I盤(pán)彈起后，讓焦點(diǎn)元素再次滾到可視區(qū)，強(qiáng)迫滾到位。 前言 最近一段時(shí)間在做 H5 聊天項(xiàng)目，踩過(guò)其中一大坑：輸入框獲取焦點(diǎn)，軟鍵盤(pán)彈起，要求輸入框吸附（或頂）在輸入法框上。需求很明確，看似很簡(jiǎn)單，其實(shí)不然。從...

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

  • iphone 軟鍵盤(pán)彈起，禁止頁(yè)面整體往上滾動(dòng)

    摘要：最近在做一個(gè)移動(dòng)端的項(xiàng)目，底部的輸入框獲得焦點(diǎn)時(shí)，軟鍵盤(pán)彈起，在手機(jī)上火把頁(yè)面整個(gè)卷走，只看到頁(yè)面的下半部分。 最近在做一個(gè)移動(dòng)端的項(xiàng)目，底部的輸入框獲得焦點(diǎn)時(shí)，軟鍵盤(pán)彈起，在IOS手機(jī)上火把頁(yè)面整個(gè)卷走，只看到頁(yè)面的下半部分。 首先經(jīng)過(guò)反復(fù)調(diào)試，找到兩條重要線索： 1、先找到鍵盤(pán)彈起時(shí)頁(yè)面中會(huì)改變的值： 測(cè)試軟鍵盤(pán)彈起時(shí)的正文全文高度、可見(jiàn)區(qū)域高度、文檔顯示高度 、被卷去的高度這...

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

  • iphone 軟鍵盤(pán)彈起，禁止頁(yè)面整體往上滾動(dòng)

    摘要：最近在做一個(gè)移動(dòng)端的項(xiàng)目，底部的輸入框獲得焦點(diǎn)時(shí)，軟鍵盤(pán)彈起，在手機(jī)上火把頁(yè)面整個(gè)卷走，只看到頁(yè)面的下半部分。 最近在做一個(gè)移動(dòng)端的項(xiàng)目，底部的輸入框獲得焦點(diǎn)時(shí)，軟鍵盤(pán)彈起，在IOS手機(jī)上火把頁(yè)面整個(gè)卷走，只看到頁(yè)面的下半部分。 首先經(jīng)過(guò)反復(fù)調(diào)試，找到兩條重要線索： 1、先找到鍵盤(pán)彈起時(shí)頁(yè)面中會(huì)改變的值： 測(cè)試軟鍵盤(pán)彈起時(shí)的正文全文高度、可見(jiàn)區(qū)域高度、文檔顯示高度 、被卷去的高度這...

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

  • iphone 軟鍵盤(pán)彈起，禁止頁(yè)面整體往上滾動(dòng)

    摘要：最近在做一個(gè)移動(dòng)端的項(xiàng)目，底部的輸入框獲得焦點(diǎn)時(shí)，軟鍵盤(pán)彈起，在手機(jī)上火把頁(yè)面整個(gè)卷走，只看到頁(yè)面的下半部分。 最近在做一個(gè)移動(dòng)端的項(xiàng)目，底部的輸入框獲得焦點(diǎn)時(shí)，軟鍵盤(pán)彈起，在IOS手機(jī)上火把頁(yè)面整個(gè)卷走，只看到頁(yè)面的下半部分。 首先經(jīng)過(guò)反復(fù)調(diào)試，找到兩條重要線索： 1、先找到鍵盤(pán)彈起時(shí)頁(yè)面中會(huì)改變的值： 測(cè)試軟鍵盤(pán)彈起時(shí)的正文全文高度、可見(jiàn)區(qū)域高度、文檔顯示高度 、被卷去的高度這...

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

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

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<