2. 程式人生 > >移動端web頁面文字框+fixed

移動端web頁面文字框+fixed

阿新 • • 發佈：2018-12-14

  • 還是保留之前的態度，依然不推薦在 Android下使用 iScroll。在開發專案時，可以考慮分為兩個版本：iOS下使用 iScroll的解決方案，Android下使用 position:fixed。

    移動端業務開發，iOS 下經常會有 fixed 元素和輸入框(input 元素)同時存在的情況。 但是 fixed 元素在有軟鍵盤喚起的情況下，會出現許多莫名其妙的問題。 這篇文章裡就提供一個簡單的有輸入框情況下的 fixed 佈局方案。

    iOS下的 Fixed + Input BUG現象

    讓我們先舉個栗子，最直觀的說明一下這個 BUG 的現象。 常規的 fixed 佈局，可能使用如下佈局（以下僅示意程式碼）：

    <body class="layout-fixed">
    <!-- fixed定位的頭部 -->
    <header>
        
    </header>
    
    <!-- 可以滾動的區域 -->
    <main>
        <!-- 內容在這裡... -->
    </main>
    
    <!-- fixed定位的底部 -->
    <footer>
        <input type="text" placeholder="Footer..."/>
        <button class="submit">提交</button>
    </footer>
</body>

    對應的樣式如下：

    header, footer, main {
    display: block;
}

header {
    position: fixed;
    height: 50px;
    left: 0;
    right: 0;
    top: 0;
}

footer {
    position: fixed;
    height: 34px;
    left: 0;
    right: 0;
    bottom: 0;
}

main {
    margin-top: 50px;
    margin-bottom: 34px;
    height: 2000px
}

    然後看起來就是下面這個樣子。拖動頁面時 header 和 footer 已經定位在了對應的位置，目測沒問題了。

    fixed定位

    fixed定位

    但接下來問題就來了！如果底部輸入框軟鍵盤被喚起以後，再次滑動頁面，就會看到如下圖所示：

    fixed定位 fixed定位

    我們看到 fixed 定位好的元素跟隨頁面滾動了起來… fixed 屬性失效了！

    這是為什麼呢？簡單解釋下： > 軟鍵盤喚起後，頁面的 fixed 元素將失效（即無法浮動，也可以理解為變成了 absolute 定位），所以當頁面超過一屏且滾動時，失效的 fixed 元素就會跟隨滾動了。

    這便是 iOS 上 fixed 元素和輸入框的 bug 。其中不僅限於 type=text 的輸入框，凡是軟鍵盤（比如時間日期選擇、select 選擇等等）被喚起，都會遇到同樣地問題。

    雖然 isScroll.js 可以很好的解決 fixed 定位滾動的問題，但是不在萬不得已的情況下，我們儘量嘗試一下不依賴第三方庫的佈局方案，以簡化實現方式。這裡拋磚引玉作為參考。

    解決思路：

    既然在 iOS 下由於軟鍵盤喚出後，頁面 fixed 元素會失效，導致跟隨頁面一起滾動，那麼假如——頁面不會過長出現滾動，那麼即便 fixed 元素失效，也無法跟隨頁面滾動，也就不會出現上面的問題了。

    那麼按照這個思路，如果使 fixed 元素的父級不出現滾動，而將原 body 滾動的區域域移到 main 內部，而 header 和 footer 的樣式不變，程式碼如下：

    <body class="layout-scroll-fixed">
    <!-- fixed定位的頭部 -->
    <header>
        
    </header>
    
    <!-- 可以滾動的區域 -->
    <main>
        <div class="content">
        <!-- 內容在這裡... -->
        </div>
    </main>
    
    <!-- fixed定位的底部 -->
    <footer>
        <input type="text" placeholder="Footer..."/>
        <button class="submit">提交</button>
    </footer>
</body>

    header, footer, main {
    display: block;
}

header {
    position: fixed;
    height: 50px;
    left: 0;
    right: 0;
    top: 0;
}

footer {
    position: fixed;
    height: 34px;
    left: 0;
    right: 0;
    bottom: 0;
}

main {
    /* main絕對定位，進行內部滾動 */
    position: absolute;
    top: 50px;
    bottom: 34px;
    /* 使之可以滾動 */
    overflow-y: scroll;
}

main .content {
    height: 2000px;
}

    這樣再來看一下：

    fixed定位

    fixed定位

    在原始輸入法下， fixed 元素可以定位在頁面的正確位置。滾動頁面時，由於滾動的是 main 內部的 div，因此 footer 沒有跟隨頁面滾動。

    上面貌似解決了問題，但是如果在手機上實際測試一下，會發現 main 元素內的滾動非常不流暢，滑動的手指鬆開後，滾動立刻停止，失去了原本的流暢滾動特性。百度一下彈性滾動的問題，發現在 webkit 中，下面的屬性可以恢復彈性滾動。

    -webkit-overflow-scrolling: touch;

    在 main 元素上加上該屬性，嗯，絲般順滑的感覺又回來了！

    main {
    /* main絕對定位，進行內部滾動 */
    position: absolute;
    top: 50px;
    bottom: 34px;
    /* 使之可以滾動 */
    overflow-y: scroll;
    /* 增加該屬性，可以增加彈性 */
    -webkit-overflow-scrolling: touch;
}

    另外，這裡的 header 和 footer 使用的是 fixed 定位，如果考慮到更老一些的 iOS 系統不支援 fixed 元素，完全可以把 fixed 替換成 absolute 。測試後效果是一樣的。

    至此一個不依賴第三方庫的 fixed 佈局就完成了。

    Android 下佈局

    談到了 iOS ，也來簡單說一下 Android 下的佈局吧。

    在 Android2.3+ 中，因為不支援 overflow-scrolling ，因此部分瀏覽器內滾動會有不流暢的卡頓。但是目前發現在 body 上的滾動還是很流暢的，因此使用第一種在 iOS 出現問題的 fixed 定位的佈局就可以了。

    如果需要考慮 Android2.3 以下系統，因為不支援 fixed 元素，所以依然要需要考慮使用 isScroll.js 來實現內部滾動。

    其實在 fixed 和輸入框的問題上，基本思路就是： > 由於 fixed 在軟鍵盤喚起後會失效，導致在頁面可以滾動時，會跟隨頁面一起滾動。因此如果頁面無法滾動，那麼 fixed 元素即使失效，也不會滾動，也就不會出現 bug 了。

    所以可以在這個方面去考慮解決問題。

    其他的一些細節處理

    在細節處理上，其實還有很多要注意的，挑幾個實際遇到比較大的問題來說一下：

    • 相關推薦

    移動端web頁面文字框+fixed

    還是保留之前的態度，依然不推薦在 Android下使用 iScroll。在開發專案時，可以考慮分為兩個版本：iOS下使用 iScroll的解決方案，Android下使用 position:fixed。 移動端業務開發，iOS 下經常會有 fixed 元素和輸入框(input 元

    移動端web頁面input+fixed佈局bug總結

    最近在做移動端，又涉及到了 fixed（固定位置定位）的問題，在使用fixed的過程中，遇到了一些的問題，並且部分問題無法找到較好的解決方案。下面 是我在網上找到的一些解決方法，僅供參考： 正常介面 圖中被紅色選中區域為 position:fixed 元素 問題

    傾力總結40條常見的移動端Web頁面問題解決方案

    web dropdown 文本 ie瀏覽器 -c cti nbsp name oct 1、安卓瀏覽器看背景圖片，有些設備會模糊。 用同等比例的圖片在PC機上很清楚，但是手機上很模糊，原因是什麽呢？ 經過研究，是devicePixelRatio作怪，因為手機分辨率太小

    移動端web頁面input限制只能輸入數字

    字段 數字 arp 設置 輸入 inpu highlight ios端 web頁面 <input type="number" pattern="[0-9]*" /> 如上所示，在安卓端設置input類型為number，可限制鍵盤只輸入數字，在ios端，要

    移動端web頁面滾動不流暢，卡頓閃爍解決方案

    方案 代碼 osi col 實現 移動端 ios端 出現 問題： 1.ios端的-webkit-overflow-scrolling屬性可控制頁面滾動效果，設置如下實現慣性滾動和彈性效果： -webkit-overflow-scrolling: touch 2.posi

    移動端web頁面開發常用的頭部標簽設置

    -h 方法 sca style 縮小 ipad edge 數字識別 ios 在移動端web頁面開發中，我們常需要設置各種頭部標簽以幫助瀏覽器更好的解析頁面，將頁面完美呈現，這裏列出了工作中常用的各種頭部標簽，以備查詢。 viewport <meta name=&quo

    chrome瀏覽器遠端除錯移動端Web頁面

      1.Android系統的移動裝置 　　a.開啟 USB除錯模式；具體設定請自行百度； 　　b.用USB資料線連線手機裝置，並同意這臺計算機進行USB除錯； 　　c.在瀏覽器位址列輸入chrome://inspect 或者about:inspec；可以顯示出裝置的名稱，在下圖中

    移動端web頁面底部固定元素（軟鍵盤彈出）解決方案

    底部固定的輸入框，如圖： 解決方案如下 <div> <Header/> // absolute, top:0 <Footer/> // absolute, bottom:0 <Content/> // absolute

    40條常見的移動端Web頁面問題解決方案

    1、安卓瀏覽器看背景圖片，有些裝置會模糊。 用同等比例的圖片在PC機上很清楚，但是手機上很模糊，原因是什麼呢？ 經過研究，是devicePixelRatio作怪，因為手機解析度太小，如果按照解析度來顯示網頁，這樣字會非常小，所以蘋果當初就把iPhone 4的960640解析度，

    移動端Web頁面適配方案

    移動端Web頁面，即常說的H5頁面、手機頁面、webview頁面等。 手機裝置螢幕尺寸不一，做移動端的Web頁面，需要考慮在安卓/IOS的各種尺寸裝置上的相容，這裡總結的是針對移動端裝置的頁面，設計與前端實現怎樣做能更好地適配不同螢幕寬度的移動裝置。 適配的目標 引用一文章的描述： 在不同尺寸的手機裝置

    移動端web頁面自適應和rem

    web頁面的自適應開發，要求就是跨平臺，跨瀏覽器，一般mobile+pc，前幾天寫了幾個pc端全屏頁面，用的是百分比，在手機上看了下效果 相去甚遠。這麼看來mobile+pc 的自適應 有些時候就是個偽命題。 那對於移動端的自適應就 一般的宣傳頁面全屏滑動那種，用百分比，若

    移動端web頁面知識小結之畫素密度、解析度、螢幕尺寸

    一直以來，本人對移動端解析度、畫素等概念傻傻分不清，特查閱多位牛人部落格後總結如下要點，以便日後檢視。 文件來源 螢幕解析度 是指螢幕上垂直方向和水平方向上的畫素個數，單位是px。常見取值 480X800,320X480等 IPhone手

    移動端web頁面知識小結之畫素、物理畫素、邏輯畫素

    一直以來，本人對移動端解析度、畫素等概念傻傻分不清，特查閱多位牛人部落格後總結如下要點，以便日後檢視。 文件來源 CSS畫素 CSS畫素是沒有實際大小的抽象單位，它是一個相對長度，它相對的是電腦或手機顯示器的解析度。 但在不同的

    開發移動端web頁面時候遇到的問題以及解決方法

    1 邊框圓角出現缺失 原因是該標籤沒有設定超出隱藏 導致子覆蓋了父 2 文字輸入框游標的顏色 caret-color 3 ios下點選a button input -----等標籤出現灰色的背景 a,button,input,optgroup,select,textarea {

    移動端web頁面知識小結之meta部分

    查閱多個部落格，總結移動端web頁面meta部分的知識如下，供以後開發使用 PS:下面講到的知識點本人正在一一親測，如有錯誤未修正，請諒解！ 參考來源： http://www.imooc.com/article/6361 http://www.

    移動端web頁面開發中遇到的三個“小坑”

    目前自己接觸的移動端專案很有限，所以發現的坑不是那麼多，暫時只記錄下最近在解決的“小坑”。 一、簡單的移動端頁面最好不用JS外掛 在開發中使用自己熟悉的框架或者外掛對自己的開發效率幫助是很大的，但是

    移動端html5頁面長按實現高亮全選文字內容的相容解決方案

    最近需要給html5的WebAPP在頁面上實現一個複製功能：使用者點選長按文字會全選文字並彈出系統“複製”選單，使用者可以點選“複製”進行復制操作，然後貼上到AppStore搜尋對應的應用。之所以不是採用連結形式直接跳轉到AppStore對應應用是為了通過使用者的主動輸入關鍵詞搜尋給推廣的企業App

    移動端web如何讓頁面強制橫屏

    前段時間公司針對直播服務做了改版升級，APP客戶端支援了橫屏和豎屏推流/播放。 在這個背景下，雖然觸屏未做改動，但本著敏而好學，不斷探索的精神，針對如何讓web頁面強制橫屏顯示，做了一下試驗研究。 首先，當用戶豎屏開啟時，提示說你要把手機轉過來是在是件很傻×的事情。這時如果使用者沒開啟手機

    vue實現移動端多格輸入框（h5頁面多格輸入）

    近來公司提出需求，完成如下圖h5頁面操作。 網上沒什麼輪子可以使用，就自己徒手擼了一個。不多廢話，直接上程式碼。 <div class="verify-tel"> <h1>簡訊驗證</h1> <h2>SMS Veri

    關於移動端的文本框獲取焦點時導致fixed或absolute定位的按鈕被手機鍵盤頂上去的問題

    問題 文本框 absolute spa event footer style cti tlist var win_h = $(window).height();//關鍵代碼 window.addEventListener(‘resize‘, functi