5min 微知識：CSS3, JQuery, HTML5 及網站小技法

為了替客戶或是自己的網站設計一個RWD的行動版樣式，感覺有了每一款機種的尺寸，就好像在設計上就完成了一半那樣(其實還差的遠了喔)！  
所以乾脆就直接整理了最近的這幾代 iPhone 每一款的螢幕尺寸解析對照表，讓有需要的朋友們參考。  
畢竟在執行 RWD 的行動版設計或是打造一個 iPhone 上的 App，有了尺寸對照表示挺方便的，不是嗎 ^^  
我們一起來看看吧 ...full story ››

在行動時代，絕大部分的流量，都來自行動裝置，若是在手機的網頁上，看到一組電話號碼，比較合理的作法，應該是點擊一下，然後就直接透過手機撥號。  
那要怎麼寫，才能讓網頁上的電話號碼，變成可以點擊撥號的超連結呢？  
寫法很簡單，只是連結額外加上 TEL: 這個結構語法。  
我們看一下電話號碼超連結標準語法 ...full story ››

設計 RWD 響應式行動網站，在完成第一階段的設計後，免不了的要直接在手機上測試，看看有沒有任何問題，可是如果要偵錯或是微調，改一個小東西，就得來來回回的在桌面上改寫存檔，再用手機 Refresh 瀏覽器一次重新查看，沒改好，再來一次....讓整個工作過程都充滿了火氣 XD  
難道在行動版的網頁，就不能像桌面版的頁面一樣，可以直接用瀏覽器提供的『開發者工具』，立即同步的來 Debug嗎？ ...full story ››

在進行響應式網站開發(RWD)的時候，  
有時候最麻煩的，還不是CSS的部分(這個部分相對是最簡單的)，  
稍微熟悉CSS語法的朋友們，  
只要透過『響應式網頁設計(Responsive Web Design,RWD)』技術，就可以很有效率的以CSS原生模式，解決不同平台間的樣式問題。  
不過有些功能，縱使再強大的CSS，也還是有一些鞭長莫及的地方，  
必須要個別建立行動裝置或是一般裝置不同的程式碼。  
 
那要如何使用偵測使用者是用什麼樣的裝置上網呢？  
 
基本上偵測的方法還蠻多的，像是一般多以 Javascript 去偵測裝置的類型，好比下面這樣的原始碼 ...full story ››

習慣使用 CSS 來設計網頁後，  
基本上很自然的就會希望，  
可不可以任何的設計想法，都直接以純CSS的語法來完成呢？  
 
其實並不確定是不是真的可以把『每一個』腦海中想要完成的技法，  
都用純CSS的方法完成，  
雖然CSS語法是真的很強大(而且是越來越強大)，  
但是設計師的在創意上的天馬行空，  
感覺可是要更勝一籌，總有些技術追不上想像的地方，是吧？ ...full story ››

在我們進行行動版網站設計的時候，  
不管是留言板或是訂單等等，頁面總是不免會出現一些表單欄位，  
當然，  
透過CSS的一些技巧，絕大多數的表單欄位、下拉選單等等都不會是問題，  
不過有很多朋友們發現，如果在手機版的網站中，  
一旦點擊了文字欄位或是下拉選單，  
那麼 iPhone 就會自動放大整個頁面(Zoom in)，  
雖然這似乎是美意一樁，可以讓網友們打字時更便利，  
但問題是放大之後，就算離開這個欄位，  
頁面也不會自動還原為原來的大小，這樣就讓人苦惱了 ...full story ››

從好幾年前開始，  
就不斷的有各個網路專家宣稱行動時代開始了，  
印象中已經有好幾個年，都被稱為所謂的行動元年，  
喊久了，似乎也就漸漸無感。  
 
專家們喊的趨勢是一回事，不管時間上準不準，方向是絕對錯不了的，  
而從流量分析上看起來，  
這兩年中，  
由行動裝置瀏覽的比例的確是很明顯的大幅增加，甚至已經完全超過50%以上了(依據我們自家的流量)，  
除此外，  
Google 也多次聲明，會將一個網站行動化的好壞，也放入檢索排名的參考因素之一 ...full story ››

RWD(Responsive Web Design)的設計，其中一個問題就是 Youtube, Vimeo 等影片嵌入時，不會隨著網頁寬度自動縮放。  
雖然 RWD 這個我們稱為響應式網站設計的東西，是很方便好用，  
不用再大費周章針對不同的平台設計不同的系統，  
只要透過一個 CSS 的文檔，就可以一打十個 ^^  
 
但是只要頁面上有嵌入影片，那麼就會讓好辛苦設計的網頁，在手機上看時，  
出現討厭的橫向捲軸(造成可以左右移動)。  
 
解決方法其實不難，我們可以試著這樣做  
 
...full story ››