一、ios移動端 軟鍵盤收起後，頁面內容被頂上去，不下滑回原處javascript
代碼以下：html
$(function(){
$('input,textarea').on('blur',function(){
window.scroll(0,0);
});
$('select').on('change',function(){
window.scroll(0,0);
});
})
原理就是彈起鍵盤的時候，window.scrollY會從0變到鍵盤的高度（例如：200），當輸入框焦點失去後讓scrollY回到0就行了。html5
可是有一個很嚴重的問題：若是頁面上有按鈕須要操做 ，例如，評論的輸入框+發佈按鈕，輸入完文字，點擊「發佈」，觸發click事件的時候，會致使頁面先觸發blur事件，鍵盤迴落，而後一切就結束了。。。。按鈕點擊沒有起任何做用。java
解決方案： 把click事件更換成ontouchstart 能夠解決這個問題。 ontouchstart 事件優於click事件觸發。android
二、移動端 input,按鈕等樣式在安卓與ios上不一樣的解決方案ios
input,select,button{
-webkit-appearance:none;
appearance:none;
}
去掉 IOS默認樣式便可web
三、IOS上下拉動滾動條時卡頓、慢ajax
body {
-webkit-overflow-scrolling: touch;
overflow-scrolling: touch;
}
四、ios頁面拖動問題小程序
body {
/* 當手指從觸摸屏上移開，滾動會當即中止 */
-webkit-overflow-scrolling: auto
overflow-scrolling: auto
}
五、iphone及ipad下輸入框默認內陰影微信小程序
-webkit-appearance: none;
六、日期問題
對於yyyy-mm-dd hh:mm:ss 這種格式在ios系統不識別。
時間格式化的時候，在瀏覽器端處理好好的，到了手機端，就變成NAN，或者null，這種狀況，是ios系統不能轉化這種類型的時間。
let date = new Date('2019-02-28 18:33:24'); // null
解決方案：轉成 yyyy/mm/dd hh:mm:ss 這種格式就能夠了。
replace(/-/g, "/")
七、ios在微信小程序的webview，鍵盤收回，頁面底部會留白
這個問題懷疑是頁面的scroll設置了auto致使的。
解決思路：
復現該bug之後發現只要滾動一下頁面就可使頁面恢復正常，因而就想可不能夠在input失去焦點之後調用一下頁面滾動，來完成該操做，發現果真能夠。而後就產生了以下代碼
temporaryRepair(){
var currentPosition,timer;
var speed=1;//頁面滾動距離
timer=setInterval(function(){
currentPosition=document.documentElement.scrollTop || document.body.scrollTop;
currentPosition-=speed;
window.scrollTo(0,currentPosition);//頁面向上滾動
currentPosition+=speed; //speed變量
window.scrollTo(0,currentPosition);//頁面向下滾動
clearInterval(timer);
},1);
}
八、iphone fixed 失效，致使一些機器上textarea光標偏移
解決方案： 全部兄弟元素變成absolute， 父元素overflow:auto。
父元素{
height: 100vh;
position: relative;
overflow: auto;}
兄弟元素{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow-x: visible;
overflow-y: auto;
padding-bottom: 10px;
z-index: 1;}
輸入框若是使用了fixed固定在底部，鍵盤頂起的時候，iphone上fixed會失效，致使頁面滾動輸入框會隨着頁面滾動，而且在部分機型上，輸入框偶爾會被鍵盤遮擋，這種偶現的問題，很不友好。
解決方案： 放棄使用fixed佈局，頁面若是有滾動，也放棄absolute，若是強行要使用absolute，請參考上一條光標偏移。建議使用flex佈局，兼容性會獲得解決。
固然，若是遇到以上這些問題，說明產品設計就很不合理，若是必要的話，仍是要更換設計，改爲input不須要被鍵盤頂起的設計，這些兼容性的解決方案，也不併不能完美的解決全部機型的問題。
-webkit-tap-highlight-color:rgba(255,255,255,0)
十一、頂部狀態欄背景色
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
說明：
除非你先使用apple-mobile-web-app-capable指定全屏模式，不然這個meta標籤不會起任何做用。
若是content設置爲default，則狀態欄正常顯示。若是設置爲blank，則狀態欄會有一個黑色的背景。若是設置爲blank-translucent，則狀態欄顯示爲黑色半透明。
若是設置爲default或blank，則頁面顯示在狀態欄的下方，即狀態欄佔據上方部分，頁面佔據下方部分，兩者沒有遮擋對方或被遮擋。
若是設置爲blank-translucent，則頁面會充滿屏幕，其中頁面頂部會被狀態欄遮蓋住（會覆蓋頁面20px高度，而iphone4和itouch4的Retina屏幕爲40px）。
默認值是default。
問題是這樣的，用input search作模糊搜索的時候，在鍵盤裏面輸入關鍵詞，會經過ajax後臺查詢，而後返回數據，而後再對返回的數據進行關鍵詞標紅。
用input監聽鍵盤keyup事件，在安卓手機瀏覽器中是能夠的，可是在ios手機瀏覽器中變紅很慢，用輸入法輸入以後，並未馬上相應keyup事件，只有在經過刪除以後才能相應！
解決辦法：
能夠用html5的oninput事件去代替keyup，而後就達到相似keyup的效果！
<script type="text/javascript"> document.getElementById('testInput').addEventListener('input', function(e){ var value = e.target.value; }); </script>