使用 minimify code 網站簡化 HTML 網頁的注意事項

在之前的〈ESP8266 全域變數佔用太多導致不斷重置〉中提到需要將 HTML 內容縮減, 才能放入 ESP8266 可用的記憶體中, 試用了許多提供縮減網頁內容的網站後, 發現許多網站縮減出來的內容都有大小不同的問題, 像是：

• 無法同時縮減同時含有 HTML/JavaScript/CSS 的單一網頁內容, 必須自己分開處理。
• 無法正確處理註解, 縮減成單一行後可能因為註解導致原來在註解之後的內容都變成註解了。
• 任意將單引號換成雙引號, 導致 JavaScript 程式碼出錯。

最後最能符合我需求的是 minify code 網站, 符合我需要縮減內含 HTML/JavaScript/CSS 的單一 HTML 檔需求, 唯一的問題是它在處理 JavaScript 字串中的 "\n" 時會轉成 "n", 例如原始內容為：

縮減後變成：

要自己手動找出來修改, 這是美中不足的地方。

HTML5 deviceorientation 事件與 CSS3 rotate3D 的方向

由於處理一本 HTML5 翻譯書的關係, 被 HTML5 中 deviceorientation 事件與 CSS3 rotate3D 的方向弄得暈頭轉向, 網路上看起來講得最清楚的就是 This End Up: Using Device Orientation 這篇文章了, 再透過其中的 demo 範例, 可以了解基本的座標軸都是 (圖片取自 Mozilla 網站)：

但是 deviceorientation 事件的角度是以右手系統為基準 (亦即右手拇指為座標軸), 所以手機螢幕朝右邊翻時, DeviceOrientationEvent.gamma 會由 0 度漸增至 90 度, 三軸的方向如下圖所示 (圖片來源：http://msdn.microsoft.com/library/ie/dn433240.aspx)：

Internet Explorer 的 developer 網站上『裝置方向事件』 一文中的方向說明也是如此。

但是 CSS3的 rotate3D 方向 y 軸是相反的, 而且是以左手系統為基準, 這是很容易搞混的方式, 程式很容易寫錯 (圖片來源：DEV.OPERA)：

 補充：更慘的是, Mozilla 目前的方向與 webkit 為基礎的瀏覽器並不一致,參考 Orientation and motion data explained 一文即可發現其中說明的方向與上述略有差異,如果在 Firefox for Android 版本上執行本文一開頭所提到的 HTML5Rocks 網站上的範例,更是會發現完全是以左手系統為基礎, 要特別留意。

RWD VS AWD VS Fluid Web Layout

最近這一年 RWD (Responsive Web Design) 很紅, 不過昨天同事問了我一個問題, RWD 和 AWD (Adaptive Web Design) 有什麼不一樣？什麼又是 Fluid Web Layout？我聽到時也是一愣, 查了一下各家說法, 大致瞭解如下：

• RWD 是在瀏覽器端判別不同裝置視窗大小, 讓同一個網頁自動套用不同的 CSS 變化版面配置。由於單一網頁內要處理各種尺寸裝置的關係, 所以必須包含所有可能需要的資料, 網頁檔案就會比較肥大, 或是小尺寸螢幕卻是用高解析度的圖檔縮小顯示, 導致下載速度較慢。
• AWD 則是由伺服端判斷後因應不同裝置而傳回不同版本的網頁給瀏覽器顯示, 這種方式可以針對個別裝置設計一套單獨的檔案, 例如小尺寸螢幕有特別設計的 HTML 檔、低解析度的圖檔等等, 檔案內容不必包山包海, 下載速度較快。也因為如此, 不同裝置會導向不同的網址, 例如常見的 m.yahoo.com 就是給手機用的版本, 而 www.yahoo.com 則是 PC 的版本。

至於 Fluid web layout (也稱為 liquid 或是 relative web layout) 則是相對於 Fixed web layout 與 elastic web layout (以下是 dreamweaver 軟體的用法)：

• Fixed web layout 指的是版面配置時直接使用 pixel 這種固定大小的單位指定寬度, 不論用哪一種尺寸的螢幕或是瀏覽器視窗觀看, 寬度都不會改變。
• Fluid web layout 指的則是版面配置時是使用百分比這樣的相對單位, 讓版面上個別區域根據相對比例分配寬度等等。
• elastic web layout 則是以相對字體大小的 em 為單位指定寬度。

使用 JavaScript 縮放網頁內容

同事開出了一個需求, 希望專為手機製作的網頁若是在桌機上的瀏覽器觀看時, 能夠自動縮小尺寸,不然以現在手機至少 800X400 點數以上的設計, 在手機上看起來大小適中的圖片, 到了桌機上的瀏覽器都會過大。

為了解決這個問題, 第一步是先能判別是手機還是桌機, 這在 detect mobile browser 網站已經提供有現成的 JavaScript 碼可用。接著就是希望能夠縮放網頁內容, 查了各種解法, 看起來要想透過 JavaScript 直接控制瀏覽器的縮放比例是不可行的, 只能透過 CSS 直接縮放網頁內容, 根據 stackoverflow 上這篇問答, 根據瀏覽器的種類, 可分別處理：

• Firefox 提供有 MozTransform 屬性可以用 scale(1.0) 的格式設定元素的縮放比例, 1,0 就是原尺寸不縮放。
• Chrome 或是 IE 則可用 zoom 屬性, 以 100% 的格式設定縮放比例。

只要將上述屬性套用在body 元素的 CSS 上, 就可以將整個網頁內容縮放成指定的比例。

不過對於 Firefox, 縮放後網頁的上下左右都會留下大塊的空白區域, 使得縮放後的內容不識顯示在瀏覽器的中央上方處, 要解決這個問題, 必須再使用 MozTransformOrigin 屬性設定為 "center top" 才行。

利用上述方式寫成的 JavaScript 碼如下：

window.onload = function(){
    var a = navigator.userAgent||navigator.vendor||window.opera;
    var level = 60;
    if (!(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))) {
     if (navigator.userAgent.indexOf('Firefox') != -1 && parseFloat(navigator.userAgent.substring(navigator.userAgent.indexOf('Firefox') + 8)) >= 3.6){//Firefox)
         document.body.style.MozTransform = "scale(" + level/100 + ")";
         document.body.style.MozTransformOrigin = "center top";
     }
     else {
      document.body.style.zoom = "" + level + "%";
      document.body.style.msTransformOrigin = "center top";
     }
 }   
};

這個解法在 IE 上也有和 Firefox 類似的問題, 就是網頁內容會偏向瀏覽器視窗的左邊, 而不是在中間上方, 目前還沒有找到解決的方法, 很可惜。

CSS 忍者的預載圖檔好威

在 Stackoverflow 上看到 CSS 忍者的這個預載圖檔技巧, 真的是太漂亮了, 只需要 CSS, 不用加上額外隱藏的 div 標籤, 也不需要 JavaScipt,就是利用 CSS generated contnet 在 body 之後產生一些不會顯示的內容, 利用這個功能載入所需的圖檔：

    body:after {
        content: url(img01.jpg) url(img02.jpg) url(img03.jpg);
        display: none;
    }

Even better image preloading with CSS2 | The CSS Ninja - All things CSS, JavaScript & HTML

IE 歷史悠久的捉迷藏臭蟲 (Peek-a-boo bug)

同事之前實作了一個網頁 AP, 可是在 IE 上會發生文字隱形的狀況, 但是字仍然是存在, 只是看不到, 如果在 IE8 上可以用滑鼠選取該段文字, 或是把隱形的那一段捲到顯示區域外, 再捲回來就可以看到了, 可是如果是 IE9, 上面的方法都無效, 但如果按 Alt 顯示功能表或是按 F12 顯示開發者工具列, 就顯示出來了, 但在隱藏功能表或是開發者工具列, 文字就又隱形。

追查了之後才發現, 這應該是 IE 中歷史已經非常悠久的捉迷藏臭蟲 (Peek-a-boo bug), 詳細的解說可以參考 IE6 Peekaboo Bug 這篇文章, 基本上就是 IE 解譯 CSS 的問題, 而解決方案可以參考 Fixing invisible or disappearing text and double margins in Internet Explorer 這篇文章, 簡而言之, 就是在會消失的文字所屬的 div 加上這樣的 CSS style：

{ height: 0.01%; }

不過爬文的過程中, 明明有人說 IE7 已經搞定這個 bug 了, 顯然 IE 果然很複雜, 這麼多年了, 我還可以在 IE9 上遇到這樣的問題！