Mee's Notes: 網頁設計

顯示具有 網頁設計 標籤的文章。顯示所有文章

星期日, 3月 09, 2014

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 網站上的範例,更是會發現完全是以左手系統為基礎, 要特別留意。

星期二, 2月 25, 2014

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 為單位指定寬度。

星期三, 12月 04, 2013

Webkit 要命的修改--支援 DOM4 的 remove()

Webkit 在 2012 年 9 月做了一項變動, 支援 DOM4 的 remove(), 會在執行此方法的元素有父元素時, 刪除掉自己。如果你用 Opera 18 測試以下的 HTML 檔：


<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <script type="text/javascript">
   function remove() {
    alert("remove is called.");
   }
  </script>
 </head>
 <body>
  <button onclick="remove()">刪除</button>
 </body>
</html>

按一下『刪除』鈕, 你可能預期會執行程式中的 remove(), 顯示訊息窗, 但實際的結果卻是『刪除』鈕不見了, 這是因為按下『刪除』後執行的是內建的 remove(), 而不是程式中所撰寫的 remove(), 而內建的 remove() 就把『刪除』鈕的 button 元素刪除了。

要解決這個問題很容易, 就是不要將 function 取名為 "remove", 不過我想應該有許多舊的網頁上都有以 remove 為名的 function, 如果剛好又是用在類似以上案例的情境下, 就會產生悲劇了！

星期三, 8月 28, 2013

超簡短的行動裝置瀏覽器 JavaScript 偵測技巧

剛剛看到 stackoverflow 上一篇超讚的回覆, 使用以下的技巧偵測是否行動裝置的瀏覽器：

if(typeof window.orientation !== 'undefined'){...}

由於一般來說, PC 上的瀏覽器都沒有提供 window.orientation 屬性, 因此可以用來快速判別是否為行動裝置的瀏覽器。

當然, 隨著往後 PC 與平版、手機界線的混淆, 也許這個方法會失效, 不過目前應該還堪用, 先學起來！

星期四, 8月 15, 2013

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

星期五, 8月 09, 2013

分享至 Facebook 時自訂網頁的標題、摘要、以及圖片

因為工作上的需要, 趕緊上網找了一下, 在以下這個網頁找到了答案：

Facebook 設定分享網頁的標題 + 內文 + 圖片 @ 小雕雕的家 :: 痞客邦 PIXNET ::

只要填入以下的 metatag, 就可以自訂許多分享的項目, 而不是由 facebook 的分享程式自己抓了：

另外, 因為分享時 Facebook 會使用 scraper 剪貼程式到要分享的網頁上搜尋摘要資訊, 並暫存下來, 如果您如上修改之後, 在分享時看到的仍是舊的摘要, 請記得到 Facebook Developer Tools 下的 debug 頁面, 輸入要分享的網址, 就可以清除 Facebook 中暫存的資料了。

星期六, 9月 22, 2012

讓 jQuery Mobile 頁面上的固定式頁首與頁尾工具列不會因碰觸畫面而隱藏

有朋友今天傳了一個 jQuery Mobile 的頁面給我, 程式如下：

<!DOCTYPE html> 
<html>
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1"> 
 <title>jQuery Mobile Demo</title> 
 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
 <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
 <script type="text/javascript">
 $(document).bind("mobileinit", function(){
  $("[data-role=header],[data-role=footer]").fixedtoolbar({ tapToggle:false });
 });
 </script>
 <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
</head> 

<body> 
<div data-role="page">
 <div data-role="header" data-position="fixed" data-fullscreen="true">
  <h1>全螢幕標頭</h1>
 </div>
 <div data-role="content">
  <img src="mycat.jpg" /> 
 </div>
</div>
</body>
</html>

這個程式是希望能在初始化的階段透過第 11 行的程式設定固定在頁首與頁尾的工具列不會因為使用者碰觸畫面而自動隱藏或重現, 不過實際執行之後, 發現設定失效, 工具列還是會以預設的方式自動隱藏或重現。經過查詢 jQuery Mobile 文件以及 Google 爬文後, 發現 mobileinit 事件發生時, 其實後續的 HTML 內容並未載入, 因此事件處理方法中的 $("[data-role=header],[data-role=footer]") 根本就抓不到元素, 自然無法讓期望的設定生效。為了解決這個問題, 只要改成處理 pageinit 事件, 也就是在後續的 HTML 內容生成後再進行設定, 就可以正確執行了。修改的程式如下：

$(document).bind("pageinit", function(){
 $("[data-role=header],[data-role=footer]").fixedtoolbar({ tapToggle:false });
});

你也可以在事件處理的程式中多加上一行 alert() 呼叫, 就可以觀察實際抓取到的元素內容了：

$(document).bind("pageinit", function(){
 $("[data-role=header],[data-role=footer]").fixedtoolbar({ tapToggle:false });
 alert($("[data-role=header],[data-role=footer]").text());
});

星期四, 2月 16, 2012

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 上遇到這樣的問題！

訂閱：文章 (Atom)

highlight.js