H5 344 微信 H5 頁面相容性解決方案

2022-10-11 11:36:13 字數 2682 閱讀 6324

點選上方「前端自習課」關注,學習起來~

都模糊處理了。

問題詳情描述:input輸入框游標,在安卓手機上顯示沒有問題,但是在蘋果手機上

當點選輸入的時候,游標的高度和父盒子的高度一樣。例如下圖,左圖是正常所期待的輸入框游標,右邊是ios的input游標。

出現原因分析:通常我們習慣用height屬性設定行間的高度和line-height屬性設定行間的距離(行高),當點選輸入的時候,游標的高度就自動和父盒子的高度一樣了。(谷歌瀏覽器的設計原則,還有一種可能就是當沒有內容的時候游標的高度等於input的line-height的值,當有內容時,游標從input的頂端到文字的底部

解決辦法:高度height和行高line-height內容用padding撐開

例如:

.content	

}

問題詳情描述:在ios端,上下滑動頁面時,如果頁面高度超出了一屏,就會出現明顯的卡頓,頁面有部分內容顯示不全的情況,例如下圖,右圖是正常頁面,邊是ios上下滑動後,卡頓導致如左圖下面部分丟失。

出現原因分析:

overflow-scrolling用了原生控制項來實現。對於有-webkit-overflow-scrolling的網頁,會建立乙個uiscrollview,提供子layer給渲染模組使用。【有待考證】

解決辦法:只需要在公共樣式加入下面這行**

*
but,這個屬性是有bug的,比如如果你的頁面中有設定了絕對定位的節點,那麼該節點的顯示會錯亂,當然還有會有其他的一些bug。

拓展知識:-webkit-overflow-scrolling:touch是什麼?

mdn上是這樣定義的:

-webkit-overflow-scrolling屬性控制元素在移動裝置上是否使用滾動回彈效果.

auto: 使用普通滾動, 當手指從觸控螢幕上移開,滾動會立即停止。

touch: 使用具有回彈效果的滾動, 當手指從觸控螢幕上移開,內容會繼續保持一段時間的滾動效果。繼續滾動的速度和持續的時間和滾動手勢的強烈程度成正比。同時也會建立乙個新的堆疊上下文。

問題詳情描述:輸入內容,軟鍵盤彈出,頁面內容整體上移,但是鍵盤收起,頁面內容不下滑

出現原因分析:

固定定位的元素 在元素內 input 框聚焦的時候 彈出的軟鍵盤佔位 失去焦點的時候軟鍵盤消失 但是還是佔位的 導致input框不能再次輸入 在失去焦點的時候給乙個事件

解決辦法:

投·被保險人姓名

changeblur(), 200)	}	}

拓展知識:position: fixed的元素在ios裡,收起鍵盤的時候會被頂上去,特別是第三方鍵盤

問題詳情描述:

出現原因分析:待補充

解決辦法:給input和textarea標籤新增focus事件,如下,先判斷是不是安卓手機下的操作,當然,可以不用判斷機型,document 物件屬性和方法,settimeout延時0.5秒,因為呼叫安卓鍵盤有一點遲鈍,導致如果不延時處理的話,滾動就失效了

changefocus(), 500);	}	}

拓展知識:

element.scrollintoview()方法讓當前的元素滾動到瀏覽器視窗的可視區域內。而element.scrollintoviewifneeded()方法也是用來將不在瀏覽器視窗的可見區域內的元素滾動到瀏覽器視窗的可見區域。但如果該元素已經在瀏覽器視窗的可見區域內,則不會發生滾動
問題詳情描述:

ios當前頁面分享給好友,點選進來是正常,如果二次分享,則跳轉到首頁;使用vue router跳轉到第二個頁面後在分享時,分享設定失敗;以上安卓分享都是正常

解決辦法:

(1)可以使用改頁面this.$router.push跳轉,為window.location.href去跳轉,而不使用路由跳轉,這樣可以使位址列的位址與當前頁的位址一樣,可以分享成功(適合分享的頁面不多的情況下,作為乙個單單頁運用,這樣重新整理頁面跳轉,還是..)

(2)把入口位址儲存在本地,等需要獲取簽名的時候 取出來,注意:sessionstorage.setitem(『href』,href); 只在剛進入單應用的時候儲存!【該方法未驗證】

▼原創系列推薦

▼5. 

webpack4 入門手冊(共 18 章)(上)

6. webpack4 入門手冊(共 18 章)(下)

7. 

H5頁面微信分享

例如 標題 title 描述 自動獲取當前瀏覽頁的url 不可自定義,無法修改 縮圖 可以在父層 div 上設定 display none 或者對 img 設定 position absolute visibility hidden 例如 display none logo512.png alt d...

微信h5頁面製作總結

第 一 尺寸問題 設計圖的尺寸我剛開始要的是750 1334px,但是在實際應用中發現忽略了手機的狀態列和導航欄的高度 iphone的設計標準,狀態列和導航欄的獨立畫素高度分別為40px和88px android系統的可以更改狀態列和導航欄的高度,可以取預設值為48px和100px 所以設計元素的展...

實現H5頁面微信分享功能

官方是在title下邊引入 我是在body下面直接引用的,沒發現有什麼問題 script 接下來要配置config,我的是通過公司提供的js介面獲取的資訊,並且呼叫方法。var title 這裡面寫分享的名字 公司介面url location.href ajax.send ajax.onreadst...