寫一支能在一般電腦與手機螢幕切換兩用的網頁設計 /做仲學

由於平板電腦和智慧手機的出現，使用的人口也逐年攀升，讓網頁設計者不得不注意這一塊消費市場的需求。

因此撰寫一支能夠偵測不同螢幕介面，以便調整畫面輸出的像素大小、字體(大小、顏色)以及座標位置等等，就變成了一件很重要的事情了。

也就是說未來的網頁設計師勢必要考慮不同介面的使用者，撰寫至少兩種不同規格的CSS語法，然後配合Javascript去偵測輸出裝置，以便決定網頁本身應該套用何種CSS規格，呈現所要的網頁外觀樣貌。

這就好像裁縫師設計兩種不同的西裝SIZE，以前會穿西裝的客戶只有一種人，那就是成年的大人，所以SIZE只有一種。現在小學生也流行穿衣裝了，於是因應市場需求分別製作了L號和S號兩型。當小朋友進來時，裁縫師就拿出S號給他穿，讓他感到合身舒適，於是就成交了。

反之，如果是成年人進來，裁縫師就拿出L號的西裝套在這個人的身上，他感覺很合身就高高興興的買了，這個重點就是生意成交了。

網頁設計師就好比是裁縫師，你不能把原本在電腦上所設計的網頁視覺效果硬套在像素較少，螢幕不大的手機上。讓手持智慧手機的使用者看到非常迷你的文字，所有的按鈕也跟著小到用手指頭點觸也很難操作。

所以如果是手機專用的網頁，字體就要大大的，按鈕也要大大的，還有不能用Flash設計網頁動畫，這是因為現在的智慧手機已經不支援了，所有的互動式畫面功能一律改用Javascript來完成，取代過去Flash網頁動畫的特效。

筆者在上一篇裡寫了從自製手機小說談起便在裡面首次製作這樣的技術，算是我的處女版，畢竟對我而言是從未做過的大事啊！

http://www.piscess.idv.tw/LifeEnjoy/QRQC/

說明：在電腦螢幕上會看到右上角有一個灰底白字幕，讓您測試一下，模擬在手機螢幕上所看到的網頁效果。也就是說如果讀者手邊沒有智慧手機也沒關係，就按下這個按鈕就可以體會了。

說明：當您切換到手機觀看版時，就會看到灰底白字幕改成了復原字樣，你可以從這裡點選恢復成一般大螢幕的網頁狀態。

說明：假如讀者是用智慧手機來查看這個網頁呢？那就會直接進入手機版，同時不會有切換按鈕。

說明：我用手指頭往上滑動，網頁就往上跑，因為字體大大的，所以看起來很舒服。