遇到手機上不同瀏覽器對 view height 計算方式不同的問題...

這次設計的要求是 "網頁畫面剛好等於高度，而且網址列可以隱藏"
根據測試的結果，Android 上的內建瀏覽器及 Firefox 似乎並不會被網址列吃掉高度，所以即使畫面剛好也能順利捲動並隱藏網址，其中內建瀏覽器的網址列甚至根本是蓋在畫面上不佔空間的 XD
但 Android 上的 Chrome, iOS 上的 Safari 與 Chrome 都會被吃掉，所以網址列無法隱藏...

網路上找到有種解法是在載入後用 JS 自動捲 1px 讓網址列消失，但此方法據說在 iOS 7 上失效了。後來有人寫出 據說在 iOS 7 上可以的辦法 ，但我們在 iOS 8 上測試卻失效了。根據資料，iOS 8 的 onscroll 觸發時機改變了，我猜會不會是這個原因才失效的

一般情形，手機上的 onscroll 是在捲動完成時才觸發 (有慣性的話也會等慣性結束)，但 iOS 8 把它改成和電腦一樣，一邊捲動的同時就會不斷觸發...

Android上Chrome的網址列是直接壓縮viewport，當網址列隱藏時viewport也隨之改變；頁面捲動時也是改變viewport，但是height依然不變，這種狀況會讓很多依賴fixed的產生非預期狀況，例如height:100%的lightbox。如果要做parallax scrolling就更頭痛了

例如某些新聞網站在進站時會跳出全畫面的lightbox廣告，但是手機依然能捲動，這時候就會產生壓黑範圍只罩到部分的狀況(fixed無法對應viewport的改變)

另外我剛剛試用window.scrollTo隱藏在我的android上是失效的XD；雖然可以推動scrollTop，但是不能改變viewport，navigation bar只有viewport改變才能隱藏

我之前試也是無效，還以為是我試錯 囧... 不過 Android 和 iOS 好像有個差別: iOS 要捲去 (0, 1)，Android 則是 (0, 0)

我剛做了一個測試頁，結果發現 Fx & 內建瀏覽器的 window 寬高真的都不變，只有 Chrome 會變。不過拿給朋友測試時發現一件有趣的事: screen 的寬高似乎和 window 一樣會考量 pixel ratio，得出的寬度是一樣的，但 UC Browser 卻例外，它的 screen 出現了真實的解析度 (1080 x 1920) www

可是奇怪的是，既然是 viewport 被壓縮造成的，那 iOS 上的 Safari 與 Chrome 應該也是有相同狀況才是 (因為那個網頁等於畫面高的網頁在這兩個瀏覽器上也有問題)，可是我請朋友測試的結果卻是... screen 數值無論有無網址列都不會變 ... /_\

剛才試著再加上了 height: 100vh 區塊的高度偵測，結果朋友依然說 iOS 上這個數值有無網址列都不會變... /_\
測試頁在 這邊

Android的chrome screen不變，但是vh有無網址列會變歐XD 我是Xperia Z Android 4.4.4

嘛，我 SAMSUNG GALAXY SII Android 4.4.4，可是 Chrome 的 screen 和 vh 都會變... 至於朋友的 iOS 上 Safari 與 Chrome 則是 screen 與 vh 都不變 囧 (雖然不變可是仍然有不能隱藏的問題)

看來好像不能這樣判斷 囧>...

朋友 Android 4.1.2 的 Chrome screen 和 vh 都會變，Fx 都不變，內建瀏覽器 screen 而 100vh 是 0

好，今天發現 Firefox 如果開過鍵盤一樣會有問題，大概是 viewport 被鍵盤壓扁的關係...? 另外根據網路上找到的截圖，iOS 在 7 的時候網址列似乎是蓋在網頁上的 ?! 這麼說來 iOS 7 下其實沒問題嗎...

上面有漏字... "(4.1.2) 內建瀏覽器 screen 而 100vh 是 0" => 內建瀏覽器 screen 會變而 100vh 是 0 (大概是不支援 vh... XD?)