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