安卓和蘋果手機Web前端一些兼容坑淺析

2019-06-08代碼教程1691
  • 詳情內容
  • 留言點評

盡管現在有很多不同品牌的手機,但就系統而言大體仍是安卓和蘋果兩大陣營,今天我們就來一起看看這兩大系統里有哪些網頁前端坑,并附上解決方法,多學習一些移動前端兼容知識,以后寫代碼的時候就能避開這些坑。

樣式表現


問題描述環境與頻率解決方法
border-radius百分比失效Android2.3.x設置一個較大值如border-radius:9999px
placeholder屬性設置的文字向上偏移的厲害Android4.x部分機型line-height:normal
iOS5及以后版本都支持. iOS4及以下版本不支持,會當做static處理.
  1. Android 2.1 及以下版本不支持.

  2. Android 2.2 滾動過程中不保持fixed的位置,滾動完成后回到fixed的位置.

  3. Android 2.3 支持fixed, 但是要求頁面禁止縮放.

  4. Android 3+ 支持fixed.


如果一個應用了css3 transform的元素里面包含fixed定位的元素,在webkit核心的瀏覽器下,該fixed定位的元素會失效,其實際定位效果類似絕對定位,會跟著滾動條的滾動而滾動!ios避免在應用了css3 transform的元素內部嵌套fixed定位的元素。
webkit上的input,button,及select的默認樣式可以通過以下代碼禁用,然后自定義。
-webkit-appearance:none;
video標簽的父元素(祖輩元素)設置transform樣式后,標簽會脫離文檔流部分android機型避免使用transform,如果需要設置位移,可使用絕對定位加top/left代替
body設置100%高度后,在移動瀏覽器里面可能會被底部的導航欄擋住:各移動瀏覽器經常出現document.documentElement.style.height = window.innerHeight + 'px'


字體設置

iOS 4.0+ 使用英文字體 Helvetica Neue,之前的iOS版本降級使用 Helvetica。·

中文字體設置為華文黑體STHeiTi。

需要說明的是,華文黑體并不存在iOS的字體庫中(http://support.apple.com/kb/HT5484?viewlocale=en_US),
但系統會自動將華文黑體STHeiTi兼容命中系統默認中文字體黑體-簡或黑體-繁:

Heiti SC Light 黑體-簡 細體
Heiti SC Medium 黑體-簡 中黑
Heiti TC Light 黑體-繁 細體
Heiti TC Medium 黑體-繁 中黑

原生Android下中文字體與英文字體都選擇默認的無襯線字體。

4.0之前版本英文字體原生Android使用的是Droid Sans,中文字體原生Android會命中Droid Sans Fallback。

4.0+ 中英文字體都會使用原生Android新的Roboto字體。

其他第三方Android系統也一致選擇默認的無襯線字體。

歡迎點評!也可以是問題反饋和建議

支持Ctrl+Enter提交
暫無留言,快搶沙發!
1

真心很贊,必須打賞!嗯,以資鼓勵~

點此打賞

99%看過的人還會看

海南环岛赛彩票奖金