移動端部分相容問題總結

2022-09-02 12:15:12 字數 1377 閱讀 4258

1、h5頁面視窗自動調整到裝置寬度,並禁止使用者縮放頁面

(部分安卓手機的uc瀏覽器寫完以後還是可以放大縮小)

2、忽略將頁面中的數字識別為**號碼

(ios上會明顯 有時候會把數字當成**號碼)

3、忽略android平台中對郵箱位址的識別

4、viewport模板

5、webkit表單元素的預設外觀怎麼重置6、在input框獲得焦點時文字被清空用value 在input框輸入文字時被清空用placeholder

webkit表單輸入框placeholder的文字能換行麼?ios可以,android不行~,在textarea標籤下都可以換行~

html,body

input:focus::-webkit-input-placeholder

11、手機上的多行省略

.overflow-hidden

13、元素一定要寫上type屬性不然會預設提交表單,出現想不到的bug

14、某些安卓手機的自帶瀏覽器不識別onkeydown onkeypress onkeyup事件,這些事件會導致不能輸入漢字

15、input框若是不想輸入文字 只能讀不能寫可以加readonly屬性

16、手機上用背景圖寫運動

如果需要背景圖定位來實現運動效果可以用rem進行計算後加上basckground-size:圖的個數*100% 0;

寫背景圖時最好加上top left 或者0 0 不然寫運動效果時容易出現跳

17、彈層的關閉事件

彈層的關閉事件容易觸發彈層關閉後下一層的事件所以要給彈層關閉事件加上event.preventdefault()

彈層彈出後不允許螢幕滾動給彈層加mousemove事件event.preventdefault()

18、麵包屑導航

如果乙個手機看到的和其他手機不一樣 會比其他的手機大或者小,檢視他的瀏覽器字型設定是否正常,應該是他把手機瀏覽的字型大小調小或者調大了(坑人的所謂的bug)

ios手機中如果出現乙個元素的層級非常高可還是被別的元素遮蓋的,那麼就將該元素與別的元素同級

19、蘋果手機固定定位有bug 檢查html和body是不是設定了overflow-x:hidden;

**

移動端部分相容問題總結

1 h5頁面視窗自動調整到裝置寬度,並禁止使用者縮放頁面 部分安卓手機的uc瀏覽器寫完以後還是可以放大縮小 2 忽略將頁面中的數字識別為 號碼 ios上會明顯 有時候會把數字當成 號碼 3 忽略android平台中對郵箱位址的識別 4 viewport模板 5 webkit表單元素的預設外觀怎麼重置...

移動端部分相容問題

1 h5頁面視窗自動調整到裝置寬度,並禁止使用者縮放頁面 viewport content width device width,initial scale 1.0,minimum scale 1.0,maximum scale 1.0,user scalable no 部分安卓手機的uc瀏覽器寫完...

移動端相容問題

1.移動端檔名不要用game等,以防被合作伺服器劫持插入廣告,從而影響專案執行 2.紅公尺手機,ua返回iphone,需要結合platform判斷,但是還不準確,導致需要ios和android區別對待的時候就坑了。3.是fixed的問題。這個解決辦法是盡量不要用,不過ios7及以下才會出現這個問題。...