1. 程式人生 > >h5相容安卓和iOS的鍵盤彈出影響佈局的坑

h5相容安卓和iOS的鍵盤彈出影響佈局的坑

這個是真的坑!!!!!!!!!!!

1、先看看正常頁面長什麼樣子,號碼是我亂輸入的,大家不要亂打= =


2、然後再看看輸入號碼後鍵盤把這個訂單確認的框頂上去了,頂上去對大螢幕手機也沒關係,就是對小螢幕手機會把訂單確認訂到被隱藏一些。點選鍵盤的下符號後,鍵盤收起來,但是訂單確認這個框就被定位上去了,需要點選一下才能恢復原樣。

      

3、查閱大量資料,嘔心瀝血,加了點程式碼,先來看看效果,這樣鍵盤出來就不會把訂單確認框頂上去下不來了(手動開心==)

       

4、我想說這個csdn也有bug,這篇我儲存兩次都只有一半的文章(黑人問號?)現在是第三次補全我的文章,拜託不要給我找茬兒好麼,謝謝csdn了!!!!!

// 相容Android 鍵盤彈起時,把確認訂單彈窗頂上去影響佈局
const h = document.body.scrollHeight  // 用onresize事件監控視窗或框架被調整大小,先把一開始的高度記錄下來
window.onresize = function () { // 如果當前視窗小於一開始記錄的視窗高度,那就讓當前視窗等於一開始視窗的高度
if (document.body.scrollHeight < h) {
document.body.style.height = h
}
}

相關推薦

h5相容iOS鍵盤影響佈局

這個是真的坑!!!!!!!!!!!1、先看看正常頁面長什麼樣子,號碼是我亂輸入的,大家不要亂打= =2、然後再看看輸入號碼後鍵盤把這個訂單確認的框頂上去了,頂上去對大螢幕手機也沒關係,就是對小螢幕手機會把訂單確認訂到被隱藏一些。點選鍵盤的下符號後,鍵盤收起來,但是訂單確認這個

app內嵌vue h5ios攔截H5點擊事件

需要 如果 bsp eth 第一個 log src ons col 安卓和ios攔截h5點擊事件,這個函數事件必須是暴漏在window下的 安卓和ios攔截普通h5函數: 1 <div onclick = "show(),window.android.show()"

js相容IOS的複製文字到剪下板

<input type="text" onclick="copy('api.xslfgame.com/wxchatlogin/index?agentId={$member['id']}')" value="api.xslfgame.com/wxchatlogin/in

前端H5ios之間通訊

在一些app場景中,經常看到app裡面巢狀H5頁面, 安卓和ios提供一個空殼子,方法兩者互相呼叫。上一週就是寫H5頁面讓安卓和ios呼叫使用,中間傳參,接受引數。通過 window.wx 物件呼叫一些原生 app 的功能。這個H5頁面,我用的是vue來寫的。用到了vue全家桶。 1.呼叫app方法

解決 手機 軟鍵盤 布局的問題

bsp doc html document 軟鍵盤 cti nbsp lur script 一、 js <script type="text/javascript">$(‘body,html‘).height(document.body.clientHeig

解決手機下鍵盤導致頁面變形的問題

我們在製作網頁時,如果使用了百分比,在安卓手機下鍵盤彈出時會導致頁面變形。比正常狀態下的頁面是長成這樣的:                                                   但是點選輸入框彈出鍵盤時就變成了這個吊樣:::        

機數字鍵盤頁面被擋問題

ive lis agen nbsp user settime listener dev useragent if ((/Android/gi).test(navigator.userAgent)) { window.addEventListener(‘resize‘, fu

處理ios當頁面原生鍵盤,輸入框不顯示

client clas bsp 安卓 ios lin style lint targe $(‘input‘).on(‘click‘, function () { var target = this; //

thinkphp5實現根據渠道號不同實現IOS的APP支付H5支付

<?php namespace app\api\controller; use think\Controller; use app\common\model\ShopInfo as ShopInfoModel; use app\common\model\UserOrde

vue中的方法如何暴露給webview,使iOS可以調用

js文件 class img blog 暴露 分享 images 技術 pan 新建一個外部公共的js文件app.js,定義一個對象並輸出,如下: var hybrid = { } window.Hybrid = hybrid if (window.Vue) { //

ios的app證書過期的相關問題匯總

shu store 國家 部分 流程 apk 公私鑰 調試 匯總 一,ios的APP的發布流程請見:ios的APP的發布流程 http://www.jianshu.com/p/b1b77d804254 這篇文章寫得很好很全面 二,app證書過期了怎麽辦: IOS的情況:

移動端 IOS 開發框架 Framework7 布局

plus size ont open active image style ner 彈出 對應的各種效果,Framework7 裏面實現的方式比較多,這裏我就只寫我用的一種,樣式有的自己修改了的,想看官方詳細的參見 http://framework7.cn 一、手風琴布局A

ios,移動端,時間排序的問題

  data是一個數組,每一項是物件,根據data數組裡面的MatchDate,時間欄位,來把這個陣列排序 , 時間格式為(MatchDate:"2018-03-21 17:00:00") data.sort(function(a, b) {     &nb

HBuilder工作筆記001---HBuilder打包ios應用

     JAVA技術交流QQ群:170933152  我打包的時候報這個錯誤: 這裡的證書需要用蘋果賬號,在中國蘋果網站上,進行申請,稽核,生成,就可以了,但是生成的時候,聽同事說,需要繫結 手機的唯一標識,也就是說,哪個

javascript區分ios

var u = navigator.userAgent; //安卓手機 if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) { //alert("安卓手機"); $('.upload-add').clic

騰訊開放平臺建立應用的iOS端如何共用同一個Appid?

很多人遇到一種情況,就是自己的應用使用QQ登入的時候,在不同客戶端,返回的openid竟然不一樣,導致統一個使用者在不同客戶端建立了不同的賬號。 這時候有兩種解決方法: 第一種:需要發郵件給騰訊開放平臺進行資料打通,具體如下 資料打通流程:現支援同一個

iOS 鍵盤與回收、介面上移下移

//新增通知,來控制鍵盤和輸入框的位置     [[NSNotificationCenterdefaultCenter] addObserver:selfselector:@selector(ke

iOS鍵盤與退回文字框的完美適配

如上圖所示,需要編輯使用者的資訊,鍵盤需要根據所輸入的行來合理的顯示鍵盤位置 ①,文字框新增監聽 //新增監聽   [selfaddRegisterText:leftTitleRightText.textFieldRight]; //新增監聽 - (void)add

手機做自動化:appium android input manager for unicode的安裝

背景: 1:在使用appium+java+Android做自動化時,總會出現appium android input manager for unicode的安裝問題 因此,查閱了方法之後,具體使用瞭如下指令,解決了此問題. 解決辦法: hideKeyboard

ios鍵盤擋住帶自定義UITableViewCell的UITableView的解決方法

案例: 需要做一個UITableView,其包含兩個section,其中一個section中的cell是UITableViewCell類物件,另一個section中的cell是自定義的Cell類物件,自定義的Cell是一個表單,裡面包含有多個UITextField。 遇