做h5頁面經常會遇到頁面有輸入功能的
例如這種的：
ps：測試機僅有一台mi4c
最開始想，鍵盤彈出應該占用了瀏覽器的視窗，所以彈出鍵盤時頁面的可用高度一定是變化的，換句話說就是彈出鍵盤導致瀏覽器的高度被壓縮。
所以通過對比輸入框獲取焦點前後瀏覽器視窗高度的變化，可以判斷出鍵盤是否彈出。
document.documentelement.clientheight // ==>
640document.body.clientheight // ==>
640window.innerheight // ==>
640
如圖：
ps：但是這個方法依賴於系統對於鍵盤彈出的處理，有些手機系統（樂視手機，小公尺2a等）貌似鍵盤彈出的時候只是單純的遮罩一層，並沒有影響到瀏覽器的視窗，所以這個方法有侷限性。同時以上三個方法，在android中的實現和ios還有一些差異。
當然對於這種設計需求在一開始就要杜絕，盡量將輸入框的位置放在上半部分，如果頁面是長頁面對於輸入框的位置就沒有特別的要求了。
網頁端開啟手機上的app
這是乙個既直觀又很好的使用者體驗，但在實現過程中會遇到各種問題 在ios9中如何處理universal link被使用者誤關的情況 如何解決android各種機型 各種第三方瀏覽器導致的相容問題等 下面是我一些個人的經驗分享。這塊內容其實比較簡單，在網上都有很多資料可供查閱，就不再贅述。因為ios9...
隨時監測螢幕大小，解決手機端小鍵盤遮擋輸入框問題
為什麼？為什麼要隨時監測螢幕大小，這是因為我們在手機端的時候，常常會遇到這樣的問題 當點選輸入框的時候，手機的鍵盤就會自動浮現，它會使得頁面的可視示高度 document.body.clientheight 發生變化。而我們的輸入框就被可憐的遮擋在小鍵盤後面 怎麼辦？我們不知道小鍵盤何時會出現，但有...
weex手機端安全鍵盤
weexsafekeyboard 效果圖 技術依賴 框架 weex vue 彈出層 weex ui 圖示 iconfont 說明 宣告 如有需要，請參考實現的思路，消化成自己的東西，勿直接複製，會消化不良。實際呼叫頁面 index.vue 如下 密碼 元件 components inputkey.v...