移動端開發常見問題彙總(未完待續)
趁着2018年的最後一天還沒有過去，就寫篇文章吧，主要是來簡單總結下移動端開發中存在的問題吧；當然移動端的問題肯定不止下面的問題，未完待續。。。
禁止頁面縮放meta標籤兼容性問題
移動端h5展示一般通過設置meta的viewport來規範頁面的展示效果，常使用如下配置：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, maximum-scale=1.0 user-scalable=no">
上面的作用之一就是禁止用戶縮放，大部分設備下是沒有問題的，但是：
在IOS >= 10 系統的safari下，user-scalable=no已不起作用
既然縮放有兼容性問題，那麼可以通過js來完成禁止縮放，比如下面：
// 禁用雙指縮放
document.documentElement.addEventListener('touchstart', function (event) {
if (event.touches.length > 1) {
event.preventDefault();
}
}, false);
// 禁止雙擊縮放
var lastTouch = 0;
document.documentElement.addEventListener('touchend', function (event) {
var now = Date.now();
if (now - lastTouch <= 300) {
event.preventDefault();
}
lastTouch = now;
}, false);
ios input內陰影的問題
input輸入框在ios下會默認有頂部內陰影的問題，在Android平臺下沒有這個問題，ios下的內陰影如下圖所示：
解決辦法爲input添加如下樣式即可：
input[type="text"] {
-webkit-appearance: none;
}
彈框滾動穿透的問題
所謂彈框滾動穿透問題，是指移動端彈出fixed彈窗後，在彈窗上滑動會導致下層的頁面跟着滾動，這個叫 “滾動穿透”。
具體可以參考這篇文章移動端滾動穿透問題，本人項目採用跟文章中的終極解決方案類似方式解決。
圖片上傳本地預覽圖片旋轉問題
在實現圖片上傳的功能時，因爲現在手機照片動不動就上兆的大小可能導致上傳比較慢，所以前端使用FileReader來快速預覽本地上傳的圖片；但是最近遇到一個問題，客戶使用上傳圖片預覽時，圖片出現了不同程度的旋轉，類似如下右圖所示出現了90度的旋轉。
這是什麼情況，通過查閱相關資料發現這跟圖片的Exif信息有關。Exif 的全稱是 Exchangeable image file format，的確是用於保存照片的一些元數據信息，如照片的拍攝設備，拍攝時間，是否使用閃光燈等。其中有一項就是 Orientation (rotation)，很明顯應該就是它了。
所以，想要獲取圖片的旋轉角度，就需要獲取圖片Exif元數據信息；正好有一個exif-js的npm包，可以獲取這些信息。獲取Orientation信息後就可以對圖片進行旋轉了。例如：
上面代碼在圖片支持exif信息的情況下可以解決，但是對於一些圖片不支持exif的情況，這篇文章 筆記：使用 JavaScript 讀取 JPEG 文件 EXIF 信息中的 Orientation 值提供了比較詳細的解決方案；其中有一個比較hack的方法，即在 html 中創建一個 iframe，再從中引用這張 img，圖片會以正確的方向顯示
參考
H5 ios input彈出的鍵盤收起後頁面留白問題
部分ios機型在h5頁面的input輸入框吊起的鍵盤收起後，彈起的鍵盤佔據的頁面部分會留白，解決方案在失去焦點時重置滾動位置：
function onInpuBlur() {
setTimeout(() => {
window.scrollTo(0, 0);
}, 100);
}