close
用手機上網時，有些 網站設計會無法正常顯示，因為這些網頁是設計在電腦上看的，如果 網頁設計 開發者沒有考慮到手機的軟硬體特性以及人們的閱讀習慣，就無法設計出手機上方便閱讀的網頁。說的簡單，但是要把既有網頁設計砍掉重練、再移植到手機上是一項大工程，筆者歸納四個方面給網頁設計開發人員參考。
一、與電腦共用同一套網頁設計
這裏的與電腦共用網頁，指的是電腦用的網頁完全不經修改、就直接給手機流覽。前提是網站本身的元素要夠簡單、版面不能太複雜。
二、製作手機專用網頁設計
三、用瀏覽器來判斷裝置
Opera有桌面版和手機版，同樣的Chrome、Safari、Firefox也是。有的網站會使用瀏覽器嗅探機制 (browsersniffing) 來判斷你是用哪一種、什麼裝置的瀏覽器，不過browsersniffing的設定很繁瑣，而且經常出差錯。最快的方法是在網頁設計上加入各種版本的連 結，讓 流覽者可以自由選擇格式。
四、開發複合型網站
複合版網站就是能同時給桌面和手機使用的網站，它跟剛談到的「與電腦共用」並不一樣，複合版網站雖然內容相同，但是它會根據螢幕大小來呈現版面。要 做複雜 合型網站其實並不難，只要用CSS與HTML標籤來調整就行，比如HTML的viewport以及CSS的media queries。
什麼是viewport
Viewport指的是「畫面視圖」，它是一堆數值的組合，白話一點的解釋就是你可以在畫面上看到的範圍，可以分成顯示畫面視圖(display viewport)以及實際畫面視圖(actual viewport)二種。對於電腦瀏覽器來說，viewport比較不重要，因為顯示畫面視圖跟實際畫面視圖是一樣的。
如果我們在CSS裏寫width＝200px，表示在顯示器上這個物件寬200px，但在手機上卻不是。CSS規範中鼓勵製造商可以自行決定硬體圖元要對應到多少顯示圖元，比如手機業者可能因為螢幕比較小，會把比例設定成1:0.5，所以手機畫面會比實際畫面小了一半。
怎麼調整呢？只要在HTML的語法中嵌入＜meta name=”viewport” content=”width=device-width”＞，把actual viewport的值給visual viewport，這樣網頁就可以完整放入手機的小螢幕。至於CSS的部分，Opera在今年的W3C CSS會議中提出了要把viewport標籤加入CSS。如果最後順利通過，以後viewport就可以直接在CSS語法裏設定。
全站熱搜
留言列表
