摘要:移動(dòng)端開(kāi)發(fā)的兼容問(wèn)題文章已同步我的筆記,歡迎大家加,加后人生更加美好下為屬性設(shè)置會(huì)出現(xiàn)樣式文字和背景異常問(wèn)題。解決方案可以使用整體放大屏幕的倍等等再使用縮放使用在移動(dòng)端會(huì)模糊也需要這樣的解決方案在移動(dòng)端圖片上傳圖片兼容低端機(jī)的問(wèn)題。
移動(dòng)端開(kāi)發(fā)的兼容問(wèn)題
文章已同步我的github筆記https://github.com/ymblog/blog,歡迎大家加star~~,加star后人生更加美好……
1、ios下input為type=button屬性disabled設(shè)置true,會(huì)出現(xiàn)樣式文字和背景異常問(wèn)題。
解決方案:使用opacity=1來(lái)解決
2、對(duì)非可點(diǎn)擊元素如(label,span)監(jiān)聽(tīng)click事件,部分ios版本下不會(huì)觸發(fā)。
解決方案:css增加cursor:pointer就搞定了
3、移動(dòng)端1px邊框
解決方案:比如按鈕的box的class為btn
.btn:before{ content:""; position: absolute; top: 0; left: 0; border: 1px solid #ccc; width: 200%; height: 200%; box-sizing:border-box; -webkit-box-sizing:border-box; -webkit-transform: scale(0.5); transform: scale(0.5); -webkit-transform-origin: left top; transform-origin: left top; }
4、input為fixed定位,在ios下input固定定位在頂部或者底部,在頁(yè)面滾動(dòng)一些距離后,點(diǎn)擊input(彈出鍵盤(pán)),input位置會(huì)出現(xiàn)在中間位置。
解決方案:內(nèi)容列表框也是fixed定位,這樣不會(huì)出現(xiàn)fixed錯(cuò)位的問(wèn)題
5、移動(dòng)端字體小于12px使用四周邊框或者背景色塊,部分安卓文字偏上bug問(wèn)題。
解決方案:可以使用整體放大屏幕的dpr倍(width、height、font-size等等)再使用transform縮放,使用canvas在移動(dòng)端會(huì)模糊也需要這樣的解決方案
6、在移動(dòng)端圖片上傳圖片兼容低端機(jī)的問(wèn)題。
解決方案:input 加入屬性 accept="image/*" multiple
7、在h5嵌入app中,ios如果出現(xiàn)垂直滾動(dòng)條時(shí),手指滑動(dòng)頁(yè)面滾動(dòng)之后,滾動(dòng)很快停下來(lái),好像踩著剎車(chē)在開(kāi)車(chē),有“滾動(dòng)很吃力”的感覺(jué)。
解決方案:
self.webView.scrollView.decelerationRate = UIScrollViewDecelerationRateNormal;對(duì)webview設(shè)置了更低的“減速率”
8、移動(dòng)端click 300ms 延時(shí)響應(yīng)
解決方案:使用 Fastclick
window.addEventListener( "load", function() { FastClick.attach( document.body ); }, false );
9、在安卓機(jī)上placeholder文字設(shè)置行高會(huì)偏上
解決方案:input有placeholder情況下不要設(shè)置行高
10、overflow:scroll,或者auto在iOS上滑動(dòng)卡頓的問(wèn)題
解決方案:加入-webkit-overflow-scrolling:touch;
11、移動(dòng)端圖片壓縮預(yù)覽上傳的問(wèn)題,可以參考我的一篇文章https://segmentfault.com/a/11...
12、移動(dòng)端適配可以使用lib-flexible https://github.com/amfe/lib-f...,使用rem來(lái)布局移動(dòng)端有一個(gè)問(wèn)題就是px的小數(shù)點(diǎn)的問(wèn)題,不同的手機(jī)對(duì)于小數(shù)點(diǎn)處理方式不一樣,有些是四舍五入,有些直接舍去掉,因此在自動(dòng)生成雪碧圖時(shí)候圖標(biāo)四周適當(dāng)留2px的空間,防止圖標(biāo)被裁剪掉
13、iphonex的適配的解決方案
body{ padding-top: constant(safe-area-inset-top); padding-top: env(safe-area-inset-top); padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); }
結(jié)束……撒花~~
文章已同步我的github筆記https://github.com/ymblog/blog,歡迎大家加star~~,加star后人生更加美好……
之后有問(wèn)題會(huì)陸續(xù)更新上去,大家有更多的兼容問(wèn)題或者以上有問(wèn)題可以在評(píng)論中留言。
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://m.specialneedsforspecialkids.com/yun/83608.html
摘要:移動(dòng)端開(kāi)發(fā)的兼容問(wèn)題文章已同步我的筆記,歡迎大家加,加后人生更加美好下為屬性設(shè)置會(huì)出現(xiàn)樣式文字和背景異常問(wèn)題。解決方案可以使用整體放大屏幕的倍等等再使用縮放使用在移動(dòng)端會(huì)模糊也需要這樣的解決方案在移動(dòng)端圖片上傳圖片兼容低端機(jī)的問(wèn)題。 移動(dòng)端開(kāi)發(fā)的兼容問(wèn)題 文章已同步我的github筆記https://github.com/ymblog/blog,歡迎大家加star~~,加star后人生...
摘要:移動(dòng)端開(kāi)發(fā)的兼容問(wèn)題文章已同步我的筆記,歡迎大家加,加后人生更加美好下為屬性設(shè)置會(huì)出現(xiàn)樣式文字和背景異常問(wèn)題。解決方案可以使用整體放大屏幕的倍等等再使用縮放使用在移動(dòng)端會(huì)模糊也需要這樣的解決方案在移動(dòng)端圖片上傳圖片兼容低端機(jī)的問(wèn)題。 移動(dòng)端開(kāi)發(fā)的兼容問(wèn)題 文章已同步我的github筆記https://github.com/ymblog/blog,歡迎大家加star~~,加star后人生...
摘要:移動(dòng)端失效需求點(diǎn)擊一個(gè),讓某一個(gè)聚焦并彈出虛擬鍵盤(pán)。安卓可以聚焦,但是不會(huì)彈出虛擬鍵盤(pán)說(shuō)明安卓機(jī)的表現(xiàn)也是異常的無(wú)法聚焦,也不會(huì)彈出虛擬鍵盤(pán)所以我的這邊的實(shí)踐結(jié)論是,如果希望在頁(yè)面初始化過(guò)程中,讓自動(dòng)聚焦并彈出虛擬鍵盤(pán)。 移動(dòng)端IOS遇到的兼容性問(wèn)題 和 Mac聯(lián)機(jī)調(diào)試方法 有時(shí)候遇到一些移動(dòng)端「疑難雜癥」,因?yàn)橐苿?dòng)端不方便調(diào)試,可能找不到問(wèn)題點(diǎn),所以經(jīng)常需要電腦端和移動(dòng)端聯(lián)機(jī)調(diào)試,...
摘要:底部定位為的情況下激活輸入框時(shí),底部不會(huì)彈出來(lái)合理。后遺癥底部按鈕和輸入框區(qū)域一起隨著滾動(dòng),不再置頂獨(dú)立。當(dāng)滾動(dòng)區(qū)域超過(guò)一屏幕時(shí),底部輸入框定位出現(xiàn)錯(cuò)亂。傳統(tǒng)解決辦法通常將底部設(shè)置為,當(dāng)激活輸入框的時(shí)候,將底部定位改為,即可兼容和。 相信我,我分享的和你在其他博客上看到的終極方案是如此的與眾不同! 做過(guò)移動(dòng)端開(kāi)發(fā)的同學(xué),對(duì)底部DOM定位出現(xiàn)的各種奇葩情況已經(jīng)深?lèi)和唇^了吧,底部DOM設(shè)置...
閱讀 1990·2019-08-30 15:54
閱讀 3541·2019-08-30 15:52
閱讀 1829·2019-08-29 17:20
閱讀 2522·2019-08-29 17:08
閱讀 2352·2019-08-26 13:24
閱讀 793·2019-08-26 11:59
閱讀 2787·2019-08-23 14:50
閱讀 620·2019-08-23 14:20