h5頁面在iOS上的問題解決

2022-04-29 08:51:07 字數 1924 閱讀 6309

1、ios移動端 軟鍵盤收起後,頁面內容被頂上去,不下滑回原處

**如下:

$(function());

$('select').on('change',function());

})

原理就是彈起鍵盤的時候,window.scrolly會從0變到鍵盤的高度(例如:200),當輸入框焦點失去後讓scrolly回到0就好了。

解決方案: 把click事件更換成ontouchstart 可以解決這個問題。 ontouchstart 事件優於click事件觸發。

2、移動端 input,按鈕等樣式在安卓與ios上不同的解決方案

input,select,button
去掉 ios預設樣式即可

3、ios上下拉動滾動條時卡頓、慢

body
4、ios頁面拖動問題

body
5、iphone及ipad下輸入框缺省內陰影

6、日期問題

對於yyyy-mm-dd hh:mm:ss 這種格式在ios系統不識別。

時間格式化的時候,在瀏覽器端處理好好的,到了手機端,就變成nan,或者null,這種情況,是ios系統不能轉化這種型別的時間。

let date = new date('2019-02-28 18:33:24');    // null
解決方案:轉成 yyyy/mm/dd hh:mm:ss 這種格式就可以了。

replace(/-/g, "/")

這個問題懷疑是頁面的scroll設定了auto導致的。

解決思路:

復現該bug以後發現只要滾動一下頁面就可以使頁面恢復正常,於是就想可不可以在input失去焦點以後呼叫一下頁面滾動,來完成該操作,發現果然可以。然後就產生了如下**

temporaryrepair(),1);

}

8、iphone fixed 失效,導致一些機器上textarea游標偏移

解決方案: 所有兄弟元素變成absolute, 父元素overflow:auto。

父元素

兄弟元素

9、鍵盤遮擋輸入框

輸入框如果使用了fixed固定在底部,鍵盤頂起的時候,iphone上fixed會失效,導致頁面滾動輸入框會隨著頁面滾動,並且在部分機型上,輸入框偶爾會被鍵盤遮擋,這種偶現的問題,很不友好。

當然,如果遇到以上這些問題,說明產品設計就很不合理,如果必要的話,還是要更換設計,改成input不需要被鍵盤頂起的設計,這些相容性的解決方案,也不並不能完美的解決所有機型的問題。

10、ios和android下觸控元素時出現半透明灰色遮罩

-webkit-tap-highlight-color:rgba(255,255,255,0)
11、頂部狀態列背景色

說明:如果content設定為default,則狀態列正常顯示。如果設定為blank,則狀態列會有乙個黑色的背景。如果設定為blank-translucent,則狀態列顯示為黑色半透明。

如果設定為default或blank,則頁面顯示在狀態列的下方,即狀態列佔據上方部分,頁面佔據下方部分,二者沒有遮擋對方或被遮擋。

如果設定為blank-translucent,則頁面會充滿螢幕,其中頁面頂部會被狀態列遮蓋住(會覆蓋頁面20px高度,而iphone4和itouch4的retina螢幕為40px)。

預設值是default。

12、ios中input鍵盤事件keyup、keydown、keypress支援不是很好

用input監聽鍵盤keyup事件,在安卓手機瀏覽器中是可以的,但是在ios手機瀏覽器中變紅很慢,用輸入法輸入之後,並未立刻相應keyup事件,只有在通過刪除之後才能相應!

解決辦法:

可以用html5的oninput事件去代替keyup,然後就達到類似keyup的效果!

H5頁面在iphone上的適配

h5 頁面在 ios 中佔據全屏頁面,在這種情況下,除了要兼顧底部小黑條,我們還要處理頁面上部跟 狀態列接觸的部分,避免內容出現在狀態列上。safe area safe area是蘋果提出的,指的是乙個可視視窗範圍,處於安全區域的內容不受圓角 齊劉海 小黑條的影響 解決方法 viewport con...

H5頁面在 ios 端滑動不流暢的問題

ios系統的慣性滑動效果非常6,但是當我們對div加overflow y auto 後是不會出這個效果的,滑動的時候會感覺很生澀。怎麼辦?body 在滾動容器內加 webkit overflow scrolling touch 但這個方案有乙個問題,在頁面內具有多個overflow auto的情況下...

H5頁面在 ios 端滑動不流暢的問題

ios系統的慣性滑動效果非常6,但是當我們對div加overflow y auto 後是不會出這個效果的,滑動的時候會感覺很生澀。怎麼辦 body 在滾動容器內加 webkit overflow scrolling touch 但這個方案有乙個問題,在頁面內具有多個overflow auto的情況下...