跳到主要內容

文章

目前顯示的是 五月, 2012的文章

[分享] Progressive Enhancement 2.0 影片內容摘要

Progressive Enhancement 2.0 摘要 先看一下 YUI Blog 這次Nicholas Zakas: Progressive Enhancement 2.0,這次50分鐘演講內,談到許多身為前端必須知道的趨勢,以下為簡單摘要。
淺談 Progressive Enhancement

Progressive Enhancement 這個主題,顧名思義漸進增強,將網站前端分為三個架構來看待,
JavaScript CSSHTML 以往的作法會是將 Html 建構完成,再加上去漂亮的 CSS 作為基礎 Tag 修飾,接著再加上 JavaScript 強化整體完整度,增強使用者體驗。


html viewport meta 說明及淺見

html viewport meta 淺見及說明 web mobile 化已經是一個全球的局面,好像網站如果沒有做個 media query,都會羞的不敢見人。
神奇的地方是很多人都會在html head 處加上 viewport 這個 meta data,為了釐清實際的效用以及屬性,接下來將大略介紹 viewport-meta 說明屬性與應用。
屬性說明 W3C 協會定義 viewport meta 目前還屬於草案,意思就是有可能隨時修改,特別註記一下,此文於西元2012年3月28日撰寫,以下描述如有出入,以W3C 標準為主。
viewport 可以設定的屬性分別如下,
width:可設定數值,或者指定為 device-width height:可設定數值,或者指定為 device-height initial-scale:第一次進入頁面的初始比例 minimum-scale:允許縮小最小比例 maximum-scale:允許放大最大比例 user-scalable:允許使用者縮放,1 or 0 (yes or no) 最初執行viewport meta加入如下
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 編譯過程會轉化成如下的語意,
@viewport { width: device-width; initial-scale: 1.0 }