webapp前端開發軟鍵盤與position:fixed爲咱們帶來的不便

前提：咱們考慮兼容的環境爲android和ios兩種智能手機

兼容環境測試結果顯示android的表現明顯好於ios，ios手機在軟鍵盤呼起收起時存在着很嚴重的兼容性問題

場景展現：

頁面正常狀態

軟鍵盤彈出時，懸掛元素丟失了指定位置

軟鍵盤未經過點擊完成而失去焦點時，頁面渲染髮生崩潰性錯亂，手指滑動後頁面會恢復正常

 

咱們再來看市面上比較強勢的webapp網站表現

場景展現：

淘寶等阿里旗下webapp網站均選擇迴避在頁面上展現懸掛元素，或者在有懸掛元素時避免產生軟鍵盤彈出事件

百度帖子回覆採用了頁面轉場模式，即在當前頁面渲染一個與本頁面無衝突的新頁面，這的確是一個很出色的辦法，可是目前咱們尚未在頁面轉場方面的研究和探索

百度貼吧搜索採用了設置固定的滾動區域，可是觸屏滑動動做在頁面滾動和區域滾動之間的體驗不好

 

如今咱們來看webapp前端開發中，軟鍵盤基本工做原理

輸入框聚焦時，軟鍵盤彈出；如輸入框在可視界面底部，軟鍵盤彈出將遮擋它時，整個可視界面模塊會被軟鍵盤自動推上去，從而保持聚焦的輸入框在咱們可視範圍

從viewport和軟鍵盤的原理上咱們無從入手，咱們甚至沒法發現軟鍵盤彈出事件，沒法獲取軟鍵盤高度，也沒法經過輸入框聚焦與否判斷軟鍵盤是否彈出，因而只好選擇尋找合適該前提條件的兼容方法

 

市面上誕生諸如iscroll等webapp前端開發框架，在html頁面上設置固定的滾動區域，並從用戶感知體驗上優化了觸屏滑動動做在頁面滾動和區域滾動之間的衝突

它的原理是經過讓html頁面上的滾動元素與懸掛元素分離，從而避免軟鍵盤彈出時，對懸掛元素產生影響，外在表現是懸掛元素的工做方式再也不是試圖吸附在可視界面的指定位置，所以因懸掛帶來的問題也就消失了

由此能夠分析出iscroll解決問題的核心思路是——模擬fixed展現效果來替代fixed

 

因而咱們最終選擇在ios下使用iscroll開發框架的方案來解決該問題

可是該方案並不是就沒有自身的問題，若是頁面上輸入框元素在頁面最底部，軟鍵盤喚起時將產生輸入框間歇性對焦不工做的問題，致使聚焦元素被喚起的軟鍵盤遮擋

該問題致使用戶輸入文本內容時的體驗將會很是差

場景展現：

軟鍵盤彈出正常時

軟鍵盤彈出間歇性不正常時

 

在咱們現有技術認知水平狀況下，採起的方案是被動妥協的，咱們的建議是在產品設計原型上，儘可能迴避輸入框元素出如今頁面最底部的場景

iscroll.min.js下載

 

還有部分android手機機型、版本、瀏覽器也不支持position:fixed屬性

經過userAgent取得該手機的部分特性，而後與ios一樣處理，後遺症是通常這樣的手機比較落後，iscroll開發框架帶來的渲染會形成頁面滑動時很卡，甚至是抽搐狀態

userAgent代碼輸出示例：

document.write(navigator.userAgent);

 

現在手機端開發的前景上，webapp正在飛速擴張，和naturalapp呈現出並駕齊驅的態勢；webapp有着自身不可替代的優點，也有着不少難以克服的弱點，也一樣須要webview的努力與支持