前端開發在手機UC瀏覽器上遇到的坑


1.user-scalable問題

寫手機頁面都會加一個meta標簽

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />

maximum-scale=1.0, user-scalable=0通過禁止用戶手動縮放和最大放大比例是1來防止用戶手指動作導致頁面放大頁面失衡。然而這個對uc並沒有什么卵用。。。如下圖(被拉伸淘寶wap頁面):

 

 

 

2.apple-touch-icon問題

在uc的開發者文檔里有這樣一段話

 


然而按照上述方法設置了桌面圖標生成的依然是uc默認的圖標。但是其它瀏覽器就可以正常的生成我們指定的桌面圖標

3.安卓機textarea實現width:100%的問題

如我我們想實現一個滿屏寬度的文本編輯框,可以display:blcok;width:100%;得以實現,然而在安卓的uc下並不能完成我們的想法。測試鏈接http://jielan.sinaapp.com/4.html

它的寬度會比屏幕的寬度小12px。詳情見:http://www.cnblogs.com/happycloud/p/4585696.html

 

4.鍵盤彈出事件觸發不會改變瀏覽器視窗大小的變化

例如微信底部評論功能的輸入框,當我們輸入內容彈出鍵盤時,輸入框應該在鍵盤的頂部。鍵盤彈出改變瀏覽器view的大小,在自己的wap站點實現類似功能的時候,發現uc並沒有把輸入框頂到鍵盤上面。測試其他瀏覽器均可以,后測試發現,uc瀏覽器在鍵盤彈出時並沒有導致瀏覽器view的高度發生變化,視窗還是原來的大小,頁面不會被“擠”上去。

 

5.fixed定位的元素在滾動的時候會消失

比較常見,不在贅述

 

6.開發版uc瀏覽器頁面滾動會導致text-indent屬性失效

 

http://m.1688.com/shengyijing_search/--139.html可以用來測試

 

7.input輸入框未指定高度,focus后高度發生跳動,需要指定display:block;才可以使用:flex:n;

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM