移動Web前端IOS系統上的各種坑

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

隨著安卓Android系統的不斷壯大,手機界蘋果IOS系統似乎已日趨成為小眾系統,不過除非它像當年塞班那樣悄然死去,否則前端兼容還是不容忽視。今天我們就來講講IOS系統上的一些前端坑:

1.input不能與position:fixed的元素共存,在頁面滾動且input是focus狀態時,fixed的元素會跟著頁面同時滾動;

2.ios中的input不能設置user-select:none;否則會input變成不可輸入狀態;

3.ios中a標簽以外的li,div,span等元素,綁定click點擊事件無效,除非在CSS中加上cursor:pointer;屬性綁定事件才會生效;并且同時會出現像鏈接一樣點擊后有背景色高亮的效果;

4.body {-webkit-overflow-scrolling: touch;overflow-scrolling: touch;}  /*解決上下拉動滾動條時卡頓、慢*/

ios中是個bug,當body實際高度不足時,會遮蓋底部fixed的元素*/

5. $('document').on("touchend","div",function(){}) ios上,點擊有效,但如果是彈窗的話,會點擊穿透后面的元素(a標簽即跳轉);

    $('document').on("click","div",function(){}) ios上,點擊無效;

    $('div').on("click", function(){}) ios上,點擊有效,且不會穿透;
6. 跑馬燈標簽(marquee標簽在iphone手機上樣式會垮掉)

7.postion:fixed定義的底部按鈕,會出現在個別iphone中渲染時,消失不見的情況:可能原因,body中內容的高度不足一屏的原因,解決方法:

html{ height: 100%;}body{ min-height:100%}

8.iphone手機的input是readonly時,還是光標還是會進入。改為disabled后會出現顏色有透明度的情況;

input:disabled{
 -webkit-text-fill-color: rgba(255, 255, 255, 1);
 -webkit-opacity: 1;
}

9.iphone6plus對flex的布局部分屬性必須使用-webkit-前綴,不然樣式會垮掉,目前有:

flex-wrap: wrap;-webkit-flex-wrap: wrap;justify-content: space-between;-webkit-justify-content: space-between;

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

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

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

點此打賞

99%看過的人還會看

海南环岛赛彩票奖金