用手機上網時，有些**會無法正常顯示，因為這些網頁是設計在電腦上看的，如果網頁開發者沒有考慮到手機的軟硬體特性以及人們的閱讀習慣，就無法設計出手機上方便閱讀的網頁。說的簡單，但是要把既有網頁砍掉重練、再移植到手機上是一項大工程，筆者歸納四個方面給網頁開發人員參考。
一、與計算機共享同一套網頁
這裡的與計算機共享網頁，指的是計算機用的網頁完全不經修改、就直接給手機瀏覽。前提是**本身的元素要夠簡單、版面不能太複雜。
二、製作手機專用網頁
這個做法在90年代非常盛行，當時電信業者的gprs/wap廣告打得正火熱，手機能瀏覽的**都是wap**，也就是用wml編寫的手機網，wml是很簡陋的html，內容通常只有文字跟選單。
▲用這個方法的好處是，wap可以在所有的手機上正常顯示，不過要同時維護手機版和桌面版的網頁會很困難，使得資訊常常無法同步。
三、用瀏覽器來判斷裝置
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的語法中嵌入，把actual viewport的值給visual viewport，這樣網頁就可以完整放入手機的小螢幕。至於css的部分，opera在今年的w3c css會議中提出了要把viewport標籤加入css。如果最後順利通過，以後viewport就可以直接在css語法裡設定。
什麼是media queries
media queries是css3的新功能，它整合了media type和max min-width/max min-height media type這兩個屬性，可以在不同的裝置下顯示不同的css版面。比如給screen的版面是一般的顯示畫面，給print的就是印表機的輸出格式。
以印表機為例，如果我們不想印出**的選單列，可以在media type下選擇不同的css呈現方式。
以下的範例裡頭有兩種css media queries的顯示版面，它們是根據螢幕的大小來提供顯示內容，當寬度小於480px，網頁版面就會改變，比如sidebar會移到畫面下方而不是跟著 主畫面浮在左邊(float: left)。閱動動向同時也會改變成由上到下，比較適合手機的垂直式閱讀，免得讀者還要吃力地在小螢幕上左右移動。
手機網頁設計注意事項和解決方法
原文 一 關於手機頁面的標準頭 字元編碼使用utf 8 指定頁面手機記憶體快取中的儲存時間段 html meta name viewport content width device width,initial scale 1.0,minimum scale 1.0,maximum scale 1....
網頁命名規範 注意事項
class的命名 注意事項 1 顏色 使用顏色的名稱或者16進製制 如 red f60 ff8600 2 字型大小,直接使用 font 字型大小 作為名稱,如 font12px font9pt 3 對齊樣式,使用對齊目標的英文名稱,如 left bottom 4 標題欄樣式,使用 類別 功能 的方式...
PCB設計注意事項
在進行設計之前要將各種約束規則設定好。1 線和孔的間距要大一點。2 小訊號部分，注意保護。小訊號指的是小電流訊號 保護，通常是進行包地。晶振電路也屬於小訊號電路。晶振要緊靠晶元引腳放置，距離太遠容易出現干擾。對於四個引腳的電容，不要從中間穿插走線。避免短路。3電容的擺放應該起到應有的作用。例如，通訊...