移動端開發常見問題彙總(未完待續)

趁着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，圖片會以正確的方向顯示

參考

• EXIF 方向參數 Orientation
• 筆記：使用 JavaScript 讀取 JPEG 文件 EXIF 信息中的 Orientation 值