時間格式時IOS不兼容的問題

原因：iOS系統(tǒng)不能識別XXXX-XX-XX（2020-05-20 12:00:00）格式的，需要將格式轉(zhuǎn)換成 2020/05/20
12:00:00

解決：

var date1 ="2020-05-20 12:00:00"
date1 = date1.replace(/-/g, '/');
console.log(date1) //2020/05/20 12:00:00

margin在IOS真機(jī)中失效

情境：在頁面中元素使用margin值，在某些IOS設(shè)備下會出現(xiàn)失效的情況，而安卓機(jī)則正常顯示。

解決：此問題暫無直接的解決方案，當(dāng)前使用空DIV控制間距。
本人實際項目中因為涉及到的是樣式問題因此最終以判斷真機(jī)是否為iOS平臺而動態(tài)加載樣式解決，有更好的解決方案或者知道問題所在的朋友歡迎評論區(qū)留言指教

input 選擇文字更多文字向下滑動，鍵盤消失問題

情境：input框中選擇文字更多的時候向下滑動鍵盤會消失。

解決：always-embed=“{{true}}”

<input type="text" placeholder="請輸入搜索內(nèi)容" confirm-type="search" placeholder-class="placeholder" value="{{inputValue}}" always-embed="{{true}}" />

input的placeholder屬性字體不居中/輸入內(nèi)容不居中

解決:
1、設(shè)置line-height及font-size
2、對input設(shè)置高度

頁面滾動卡頓

解決：設(shè)置-webkit-overflow-scrolling:touch;

隱藏scroll-view滾動條

解決：樣式中設(shè)置

::-webkit-scrollbar{
	width: 0;
	height: 0;
	color: transparent;
}

視頻播放格式問題

<video src="{{videoSrc}}" controls   custom-cache="{{cache}}"></video>
cache：false

ios 表單元素 input 和textarea 默認(rèn)有內(nèi)陰影

解決：

 input{  -webkit-appearance: none; } 

ios鍵盤彈出導(dǎo)致頁面顯示異常

原因： ios上的軟鍵盤會使頁面的fixed定位失效。

解決辦法： 可以監(jiān)聽resize事件（瀏覽器窗口大小調(diào)整時觸發(fā)），當(dāng)鍵盤彈出的時候，更改頁面的position屬性值。

安卓ios打開相機(jī)選擇相冊

解決：

<input class="js_upFile cover1" type="file" name="cover" accept="image/*" capture="camera" multiple/>
$(function () {
    //獲取瀏覽器的userAgent,并轉(zhuǎn)化為小寫
    var ua = navigator.userAgent.toLowerCase();
    //判斷是否是蘋果手機(jī)，是則是true
    var isIos = (ua.indexOf('iphone') != -1) || (ua.indexOf('ipad') != -1);
    if (isIos) {
        $("input:file").removeAttr("capture");
    };
})

ios底部安全區(qū)適配

解決：

padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);

記錄貼，更多踩坑待補(bǔ)充。。。文章來源地址http://www.zghlxwxcb.cn/news/detail-484641.html

到了這里，關(guān)于小程序開發(fā)安卓/ios兼容踩坑合集的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！