小雕雕的家

最近在做一個網頁，因為裡面包含了行動版的網頁，所以就要讓 Android、IOS 都可以正常使用

開發完之後我只能說.....IOS 的瀏覽器 (iPhone Safari、Chrome) 已經不是普通的爛

不管是操作面還是實際開發上，都讓我快要吐血.....這篇不談操作面，只講開發

因為遇到了很多靈異事件，在電腦版跟 Android 上都好好的，在 IOS 上就不行

不然就是只有 IOS 不支援，所以當你遇到靈異事件，第一件事可以先到 can i use 來查是否有支援

https://caniuse.com/

以下就列出我在這個專案所遇到有關行動裝置的問題與一些解決方式

1. IOS 的數字鍵盤

雖然 input type 設定是 number，這樣：<input type="number" />

但是 iPhone 的瀏覽器不會跳出數字鍵盤，Android 則是可以

要讓 IOS 瀏覽器輸入時出現數字鍵盤，就要加上 pattern 才行

pattern 裡面的字串是規則表示式，請參考 pattern：

https://www.w3schools.com/tags/att_input_pattern.asp

所以改成這樣就可以了  

<input type="number" pattern="\d*" />

2. HTML5 Vibration API 在 IOS上無法作用

Vibration 這個 API 可以讓手機震動，而且很簡單只要一行，下面是 MDN 範例

https://developer.mozilla.org/zh-TW/docs/Web/API/Navigator/vibrate

ex：

window.navigator.vibrate(200); // vibrate for 200ms

window.navigator.vibrate([100,30,100,30,100,200,200,30,200,30,200,200,100,30,100,30,100]); // Vibrate 'SOS' in Morse.

但是不支援 IOS 的 safari，Android 可以，而且還不需要事件就能觸發

而 IOS上的 Chrome 其實只是皮，骨子裡還是 safari，所以還是不行

因此如果要讓 iPhone 模擬振動的話，可以找一段震動的鈴聲來播放 = =

這樣做出來其實會有 87%像震動，缺點是音量要請使用者自己調整一下

3. HTML5 Video、AUDIO 在行動裝置上無法自動播放

這個問題在 Android、IOS 上都一樣，要播放影音，都必須要透過 Client 端事件觸發才能播放

如果你的影音播放時機是無事件的，就會無法播 (例如：ajax 從 server 回來時播放 or 隔幾秒後播放)

但有一個折衷的作法可以做到

先想辦法在頁面上有個事件讓使用者觸發播放，然後馬上暫停

之後就可以隨心所欲的不用事件才能播放了

舉例來說：

頁面上有個按鈕，點下去後隔三秒要播放 1.mp3

<button type="button">click</button>
<audio id="audio" src="audio/hide/1.mp3" controls="controls" style="display:none;" />

於是你就這樣寫，打算三秒後播放

然後發現三秒後在手機上沒有任何動靜，但是在電腦瀏覽器上看是正常的

這個時候可以改成這樣寫

click 時先觸發一次再暫停，之後就可以正常播放了

4. IOS 行動裝置上綁定事件失效的問題

我有在一個頁面中透過回圈方式綁定 keyup 事件，但是發現 IOS 沒反應

這個在 Android 上是正常的，如果你有遇到這個問題，在 IOS 上請盡量一個一個綁定

如果你是一個一個綁定但還是不行......請試一下以下的都市傳說

a. 將要被 click 的元素加上 css 的 cursor: pointer;

請參考：https://stackoverflow.com/questions/15095868/jquery-click-not-working-in-ios

b. 如果你是使用 jQuery，用 on 取代 click

請參考：https://stackoverflow.com/questions/15095868/jquery-click-not-working-in-ios

c. 如果你是 keyup 或是 keydown 盡量換成 keypress

請參考：https://stackoverflow.com/questions/9940829/how-to-capture-the-onscreen-keyboard-keydown-and-keyup-events-for-touch-devi

d. CSS 不可以設定成 display: none;

請參考：https://stackoverflow.com/questions/32708496/safari-on-ios-9-does-not-trigger-click-event-on-hidden-input-file

e.  嘗試使用 touchstart 或是 touchend 事件來取代

f. 不要透過迴圈來綁定事件，請一個一個手動綁 (我是這樣解決的)

5. 在行動裝置上無法限制 <input type="number" /> 數字的長度

HTML5 中的 maxlength 屬性因為不能用在 number 上，所以不用在浪費時間找問題了

maxlength 只能用在 text、email、search、password、tel、url

所以只能自己寫 js 檢查長度

6. 行動裝置全螢幕模式 (IOS不支援)

fullscreen API 可以讓瀏覽器全螢幕，達到更好的瀏覽體驗，但是 IOS 不支援

Android 如果要使用的話，則必須要由事件來觸發才行

全螢幕與取消全螢幕的寫法，如下方官網片段

https://developer.mozilla.org/zh-TW/docs/Web/Guide/DOM/Using_full_screen_mode

function toggleFullScreen() {
  if (!document.fullscreenElement &&    // alternative standard method
      !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement ) {  // current working methods
    if (document.documentElement.requestFullscreen) {
      document.documentElement.requestFullscreen();
    } else if (document.documentElement.msRequestFullscreen) {
      document.documentElement.msRequestFullscreen();
    } else if (document.documentElement.mozRequestFullScreen) {
      document.documentElement.mozRequestFullScreen();
    } else if (document.documentElement.webkitRequestFullscreen) {
      document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
    }
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
    }
  }
}

7. 網頁上的計時必須由使用者觸發的事件啟動

如果你在行動裝置網頁上有用 setTimeout 或 setInterval 的話

要注意必須要由使用者觸發的事件來啟動，不然會沒反應

先整理到這邊，如果之後的專案還有遇到再陸續補充