1食侮，ios軟鍵盤彈出時(shí)候遮擋輸入框
這類問(wèn)題主要出現(xiàn)在input趁尼，textarea等輸入框在頁(yè)面底部的時(shí)候诅妹，ios會(huì)概率性等出現(xiàn)此問(wèn)題,
具體情況可參考：https://www.cnblogs.com/wx1993/p/6059668.html
解決方式如下：
$('input').on('click', function () {
var target = this;
// 使用定時(shí)器是為了讓輸入框上滑時(shí)更加自然
setTimeout(function(){
target.scrollIntoView(true);
},100);
});
2震嫉，ios + fastClick 導(dǎo)致 input點(diǎn)擊獲取焦點(diǎn)慢的問(wèn)題
移動(dòng)端默認(rèn)有點(diǎn)擊事件300ms延遲問(wèn)題赤赊，為了解決這個(gè)問(wèn)題，我們通常使用fastClick插件去解決渊涝。但是使用了fastClick在ios中會(huì)導(dǎo)致輸入框聚焦很慢慎璧，反應(yīng)不靈敏，必須要用力按下去才能獲取到焦點(diǎn)跨释。
解決方式如下：
在 /node_modules/fastclick/lib/fastclick.js文件中找到focus方法添加一句代碼 targetElement.focus();
FastClick.prototype.focus = function (targetElement) {
let length;
if (targetElement.setSelectionRange && targetElement.type.indexOf('date') !== 0
&& targetElement.type !== 'time' && targetElement.type !== 'month') {
length = targetElement.value.length;
targetElement.focus();
targetElement.setSelectionRange(length, length);
} else {
targetElement.focus();
}
}
3胸私，ios + fixed定位 + input輸入框聚焦時(shí)，fixed定位元素會(huì)彈到軟鍵盤上鳖谈，導(dǎo)致頁(yè)面錯(cuò)亂
目前暫未解決方法岁疼，注意有input的輸入框時(shí)候盡量不要使用fixed定位元素。等有合適的解決方案再做記錄缆娃。
4. ios下 mint-ui 的datePicker 插件滑動(dòng)穿透
- 解決方法1：
思路比較簡(jiǎn)單捷绒，使用Vue的@touchmove.prevent,在datePicker元素外加一層div元素包裹瑰排，在外層div里加上@touchmove.prevent,效果還在測(cè)試中。
<div style="width: 100%;" @touchmove.prevent>
<mt-datetime-picker
:startDate="startDate"
:endDate="endDate"
@confirm="handleConfirmSupose"
ref="picker"
type="date"
year-format="{value} 年"
month-format="{value} 月"
date-format="{value} 日">
</mt-datetime-picker>
</div>
- 解決方法2：
思路是監(jiān)聽(tīng)visible-change事件暖侨，當(dāng)datePicker框打開(kāi)時(shí)給body元素加上阻止默認(rèn)事件椭住，當(dāng)datePicker框消失時(shí)移除body元素上的阻止默認(rèn)事件。
具體操作參考： http://www.reibang.com/p/58c7c21d5df4
5.ios 劉海屏在瀏覽器中無(wú)法充滿屏幕字逗，會(huì)在底部留出一塊白色區(qū)域
- iphoneX的“劉壕┲＃”為相機(jī)和其他組件留出了空間，同時(shí)在底部也留有可操作區(qū)域葫掉。我們頁(yè)面的內(nèi)容默認(rèn)被限制在了這樣的“安全區(qū)域”內(nèi)些举，所以會(huì)導(dǎo)致兩邊會(huì)出現(xiàn)一道白條。
很多時(shí)候我們想讓頁(yè)面充滿整個(gè)屏幕俭厚，（比如存在背景色金拒，背景圖片）為了解決這個(gè)問(wèn)題，ios提出了一個(gè)viewport-fit的屬性套腹，cover代表充滿整個(gè)屏幕绪抛。
可參考：（http://t.zoukankan.com/djjlovedjj-p-13983852.html）
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
body{
height: calc(96rpx+ constant(safe-area-inset-bottom));
height: calc(96rpx + env(safe-area-inset-bottom));
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}
如果body高度無(wú)法達(dá)到100%，記得將body的最外層的子元素高度設(shè)置為100vh,已經(jīng)解決了我的問(wèn)題电禀。
