項目難點:解決IOS調用起軟鍵盤之后頁面樣式布局錯亂問題

需求背景 :

? ? 開發了一個問卷系統重構項目,剛開始開發的為?PC 端,其中最頭疼的一點無非就是

IE 瀏覽器的兼容適配性問題;

? ? 再之后項目經理要求開發移動端,簡單的說就是寫 H5 頁面,到時候會內嵌在 App 應用、辦公系統或小程序里,剛開始在 Edge 瀏覽器模擬器里面進行的開發,因為自己也是頭一次開發移動端的項目,沒啥經驗(后來知道就是盡量避免使用 fixed 定位,IOS會有兼容性問題),但是項目內還是有好多地方都使用了 fixed 的固定定位,因此也就導致了,項目開發完使用 Jenkins 打包部署上線后,在 IOS 系統的蘋果真機上面測試時,就會遇到了各式各樣的奇葩問題。。

? ? 首當其沖,也是最大的問題就是 :

? ? ? ? 1、當 input 輸入框聚焦調用起軟鍵盤輸入完內容之后,也就是軟鍵盤收起來后,整個頁面布局排版樣式啥的都亂了,而且當你想再次選中輸入框時,發現選不中了,其實是此時整個頁面都已經掉下來一塊了,再想選中聚焦的話,就要往上面點擊一下才行。。


然后反正就是各種百度,各種請教?:

JSBridge :?支付寶H5開放文檔


百度的 :

解決 H5 IOS input 聚焦時,頁面整個被推上去了,鍵盤收起頁面未下移 BUG

IOS下軟鍵盤收起的時候,頁面被頂上去,無法復原的終極解決方案

uniapp 開發項目

記一次h5頁面ios喚起軟鍵盤踩坑 - 掘金

UniApp中input組件在IOS設備上彈出軟鍵盤時頁面整體上移問題的解決方案,以及input組件聚焦后彈出軟鍵盤固定在軟鍵盤上方,失去聚焦后回到原始位置。_ios彈出鍵盤界面上移


上面的千奇百怪的方式都試過了,最后還是沒啥卵用 :

最終在請教了公司內的大佬之后,就 OK 啦 ~

-webkit-backface-visibility_筆記大全_設計學院

結合 ? :?-webkit-transform: translate3d(0,0,0)

在 App.vue 內全局配置了一下完事 !

( 當然這里最好判斷一下是否為 IOS 系統再添加屬性,因為可能會影響到安卓系統的喲~?)

Perfect ! !下課~

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/39945.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/39945.shtml
英文地址,請注明出處:http://en.pswp.cn/news/39945.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

multiple definition of......first defined here

一、背景 環境: 銀河麒麟–ARM–GCC7.4.0 寫了一個動態庫,依賴opencv和freeImage等第三方庫,用cmake進行編譯。原本在centos6-x86-gcc7.5.0上面進行編譯非常的順利,但是拿到麒麟arm上面編譯就提示了這個錯誤:這個報錯…

Python conda命令

Windows下 Anaconda Prompt 這個東西就是用來管理Anaconda的,使用的是conda這樣的一種命令 在Linux中,可以直接在終端中輸入conda 命令 可以使用conda命令創建新的python環境(python版本,包),新的環境與原…

Ruby軟件外包開發語言特點

Ruby 是一種動態、開放源代碼的編程語言,它注重簡潔性和開發人員的幸福感。在許多方面都具有優點,但由于其動態類型和解釋執行的特性,它可能不適合某些對性能和類型安全性要求較高的場景。下面和大家分享 Ruby 語言的一些主要特點以及適用的場…

【C語言】動態通訊錄 -- 詳解

?前言 前面詳細介紹了靜態版通訊錄【C語言】靜態通訊錄 -- 詳解_炫酷的伊莉娜的博客-CSDN博客,但是靜態版通訊錄的空間是無法被改變的,而且空間利用率也不高。為了解決靜態通訊錄這一缺點,這時就要有一個能夠隨著存入聯系人數量的增加而增大…

Ansys Zemax | 手機鏡頭設計 - 第 1 部分:光學設計

本文是 3 篇系列文章的一部分,該系列文章將討論智能手機鏡頭模組設計的挑戰,從概念、設計到制造和結構變形的分析。本文是三部分系列的第一部分,將專注于OpticStudio中鏡頭模組的設計、分析和可制造性評估。(聯系我們獲取文章附件…

Vue緩存路由組件

目錄 一、使用 一、使用 作用&#xff1a;讓不展示的路由組件保持掛載&#xff0c;不被銷毀 <template><div><h2>Home組件內容</h2><div><ul class"nav nav-tabs"><li><router-link class"list-group-item"…

安防監控視頻云存儲平臺EasyNVR通道頻繁離線的原因排查與解決

安防視頻監控匯聚EasyNVR視頻集中存儲平臺&#xff0c;是基于RTSP/Onvif協議的安防視頻平臺&#xff0c;可支持將接入的視頻流進行全平臺、全終端分發&#xff0c;分發的視頻流包括RTSP、RTMP、HTTP-FLV、WS-FLV、HLS、WebRTC等格式。為了滿足用戶的集成與二次開發需求&#xf…

OpenCV(二)——圖像基本處理(二)

目錄 2.圖像的幾何變換 2.1 圖像平移 2.2 圖像縮放 2.3 圖像旋轉 2.4 仿射變換 2.5 透視變換

企業計算機服務器遭到了locked勒索病毒攻擊如何解決,勒索病毒解密

網絡技術的不斷發展&#xff0c;也為網絡安全埋下了隱患&#xff0c;近期&#xff0c;我們收到很多企業的求助&#xff0c;企業的計算機服務器遭到了locked勒索病毒的攻擊&#xff0c;導致企業的財務系統內的所有數據被加密無法讀取&#xff0c;嚴重影響了企業的正常運行。最近…

如何通過觀測云的RUM找到前端加載的瓶頸--可觀測性入門篇

聲明與保證 本文寫作于2023年6月&#xff0c;性能優化的評價標準和優化方式僅適用于當前觀測云控制臺&#xff0c;當然隨著產品迭代及技術更新&#xff0c;本文也會應要求適當更新。 創建、修訂時間創建修改人版本2023/6/24觀測云***v1.0.0 1.網站性能評價的發展史&#xff…

PHP“深入淺出”淘寶商品詳情數據接口獲取方法,淘寶API申請指南

獲取淘寶商品詳情數據的方法如下&#xff1a; 確定監控對象&#xff0c;通常是與自己店鋪的商品相似的競品&#xff0c;通過在淘寶商品詳情頁的URL中獲取商品ID&#xff0c;進而獲取商品的詳情數據。通過API接口獲取商品詳情數據&#xff0c;申請開發者賬號并獲取授權訪問&…

打開vim的語法高亮

在一個Ubuntu中自帶的vim版本是8.2.4919&#xff0c;默認就是開始了語法高亮的&#xff0c;打開一個Java文件效果如下&#xff1a; 它不僅僅對Java文件有語法高亮&#xff0c;對很多的文件都有&#xff0c;比如vim的配置文件也有語法高亮&#xff0c;有語法高亮時讀起來會容易…

DNNGP模型解讀-early stopping 和 batch normalization的使用

一、考慮的因素&#xff08;僅代表個人觀點&#xff09; 1.首先我們看到他的這篇文章所考慮的不同方面從而做出的不同改進&#xff0c;首先考慮到了對于基因組預測的深度學習方法的設計 &#xff0c;我們設計出來這個方法就是為了基因組預測而使用&#xff0c;這也是主要目的&…

排序算法-冒泡排序(C語言實現)

簡介&#x1f600; 冒泡排序是一種簡單但效率較低的排序算法。它重復地掃描待排序元素列表&#xff0c;比較相鄰的兩個元素&#xff0c;并將順序錯誤的元素交換位置&#xff0c;直到整個列表排序完成。 實現&#x1f9d0; 以下內容為本人原創&#xff0c;經過自己整理得出&am…

WAVE SUMMIT2023六大分會場同步開啟,飛槳+文心大模型加速區域產業智能化!

由深度學習技術及應用國家工程研究中心主辦、百度飛槳和文心大模型承辦的WAVE SUMMIT深度學習開發者大會2023將于8月16日重磅來襲&#xff01;屆時上海、廣州、深圳、成都、南昌和寧波六大分會場將同步開啟&#xff01; 分會匯聚區域產業大咖、科研機構專家、知名學者和技術大…

【C++ 學習 ?】- 詳解 list 容器

目錄 一、list 容器的基本介紹 二、list 容器的成員函數 2.1 - 迭代器 2.2 - 修改操作 三、list 的模擬實現 3.1 - list.h 3.2 - 詳解 list 容器的迭代器 3.2 - test.cpp 一、list 容器的基本介紹 list 容器以類模板 list<T>&#xff08;T 為存儲元素的類型&…

【第二階段】kotlin函數引用

針對上篇傳入函數參數我們也可以重新定義一個函數&#xff0c;然后在main中調用時傳入函數對象 lambda屬于函數類型的對象&#xff0c;需要把普通函數變成函數類型的對象&#xff08;函數引用&#xff09;&#xff0c;使用“&#xff1a;&#xff1a;” /*** You can edit, ru…

DRF 緩存

應用環境 django4.2.3 &#xff0c;python3.10 由于對于服務而言&#xff0c;有些數據查詢起來比較費時&#xff0c;所以&#xff0c;對于有些數據&#xff0c;我們需要將其緩存。 最近做了一個服務&#xff0c;用的時 DRF 的架構&#xff0c;剛好涉及緩存&#xff0c;特此記…

webSocket 筆記

1 認識webSocket WebSocket_ohana&#xff01;的博客-CSDN博客 一&#xff0c;什么是websocket WebSocket是HTML5下一種新的協議&#xff08;websocket協議本質上是一個基于tcp的協議&#xff09;它實現了瀏覽器與服務器全雙工通信&#xff0c;能更好的節省服務器資源和帶寬…

centos 7.9 部署django項目

1、部署框架 主要組件&#xff1a;nginx、uwsgi、django項目 訪問頁面流程&#xff1a;nginx---》uwsgi---》django---》uwsgi---》nginx 2、部署過程 操作系統&#xff1a;centos 7.9 配置信息&#xff1a;4核4G 50G 內網 eip &#xff1a;10.241.103.216 部署過程&…