LimeJS : 偵測是否在 iOS 的裝置中

忘了是從什麼時候開始，用 LimeJS 開發的 HTML5 程式，在行動載具上，會有一個問題不大，但卻令人困擾的小臭蟲。常常會遇到載入程式時，畫面的比例、位置不太對，明明利用 LimeJS 框架寫的程式會自動計算，並按設定的比例，盡量填滿瀏覽器視窗的，卻會有如底下兩個截圖的差異：

[圖1] 正常的畫面

[圖2] 未正常調整比例的畫面

以我寫的 HTML5單字高手來說，會像在 [圖1] 左下角有版本戳記；但是在 iOS 上，常常會變成 [圖2] 的樣子，比例稍大，然後周圍的部份就會被截掉。早期並沒有這個問題的，很明顯地，在 iOS 的 Safari，一定有改了什麼，而 LimeJS 這個古董級的框架沒跟上。

我後來發現，只要將載具旋轉一下，由橫拿變直拿，再由直拿變成橫拿，畫面就可以由 [圖2] 變成 [圖1]。不過，雖然這個方法可以解決問題，不但麻煩，也不是每個人都知道啊！

這兩天在寫新的程式，對這個問題實在覺得感冒，決定好好地追一下問題出在哪裡。

在 LimeJS 的原始碼中，控制畫面比例，包括啟始大小的計算、改變大小及旋轉......等，都是由 director.js 在控制。在 director.js 中，「invalidateSize_ 」就是負責計算調整大小的程序，所以在好幾個系統事件中，都會去執行它。

追一下有關行動載具相關的，有以下的片段：

//todo: look for a less hacky solution
if(goog.userAgent.MOBILE && !goog.global['navigator'].standalone){
var that = this;
setTimeout(
function(){window.scrollTo(0, 0);that.invalidateSize_()}
,100);
}

在 director.js 中，它利用了「goog.userAgent.MOBILE」來判斷是不是行動載具，如果是，就會執行將畫面往上拉到頂，並重新計算大小、調整位置。

針對 goog.userAgent.MOBILE 偵錯，在 iOS 10.3.4 中，它得到的值是 True；而在 iOS 15 上，則為 False。這和在 iOS 10.3.4 中可以正確地調整大小，而在 iOS 15 不正常的結果是吻合的。這樣子，看來問題出在 goog.userAgent.MOBILE 並沒有正確地偵測到 iOS。

這讓我想起，之前寫「HTML5 幾A幾B」時，曾經有研究過如何偵測是否為 iOS，使用了這個判斷式：

if( /iPad|iPhone|iPod/.test(navigator.platform)
|| (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1)
   )

最重要的其實是「navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1」，細節可以用這個當關鍵詞搜尋看看。

不過，如果是應用在 LimeJS 的「壓縮編碼」，navigator.maxTouchPoints 要改成 navigator['maxTouchPoints']，以免因為 maxTouchPoints 被編碼，又無法正常判斷。

綜合前述的測試結果，LimeJS 原始碼中的 director.js 中的這部份：

//todo: look for a less hacky solution
if(goog.userAgent.MOBILE && !goog.global['navigator'].standalone){
var that = this;
setTimeout(
function(){window.scrollTo(0, 0);that.invalidateSize_()}
,100);
}

修改為：

//todo: look for a less hacky solution
if((goog.userAgent.MOBILE 
  ||  /iPad|iPhone|iPod/.test(navigator.platform)
  || (navigator.platform === 'MacIntel' && navigator['maxTouchPoints'] > 1)
)
&& !goog.global['navigator'].standalone){
var that = this;
setTimeout(
function(){window.scrollTo(0, 0);that.invalidateSize_()}
,100);
}

這樣子，在 iOS 中，就可以自動調整位置及大小了。

有空再將 HTML5 FUN 中的程式，一個個重新編譯，並更新。