如何設定CSS寛度以打造手機網頁 - 部落格

如何設定CSS寛度以打造手機網頁

網誌圖文版：

http://www.b88104069.com/archives/4035

一直以來，我的網頁手機版，都是用WPtouchPro這個插件，當初為了在手機
上放廣告，特地花錢升級到Pro。它有最大的重點在於「Multi-Ads」，我充
份利用了這個功能，投了幾個谷歌和百度的廣告。另外一個功能是「
Infinity Cache」，號稱能夠無限緩存，加快網頁下載的速度，我實在不確
定是有加快速度，但是很快發這因為緩存，統計數據變得不太合理真實，所
以就關了。

WPtouchPro在網頁移動化方面，確實做得不錯，有很多主題，可以放置很多
廣告。可是我在使用上，一直有個致缺點，不知為何，手機載入移動網頁的
速度非常慢，很明顯比電腦網頁還要慢。我的電腦網頁用Safari、Chrome、
Firefox打開的速度尚可接受，只有IE速度慢到會讓人抓狂，我覺得這個可能
是瀏覽器本身的問題，IE一直為人所垢病，所以我也不追究了。而手機
WPtouchPro的速度，竟然跟電腦IE有得拼，這個我就很介意。

一來它是插件，我根本無從改善起，二來它是花錢的插件，花錢沒有得到好
效果，就必須好好思考了。人家說創業至少得虧三年，我開始寫文章到現在
三年了，之前廣告投放在部落格，現在弄個自己網站，架站的成本一直沒有
回收，所以能省則省，唯一要花錢的插件，當然要仔細考量成本效益。

剛好最近一年時間到期，它通知我續費，一年原價390美金，打完折90美金。
其實就它載入速度這個致命的缺點，就算打再多的折我也不用。於是我決定
嘗試看看，自己動手將網頁移動化，最終目的，是不再使用插件了，因為插
件雖然方便，但它捆綁了太多不一定需要的功能，反而變成虛胖，拖垮網頁
的速度。

移動化的過程中，除了卸除插件提速之外，最重要的還是放置移動廣告。這
個過程不是很容易，在網上找了很多資料，摸索試驗了好幾次，總算有點成
績，我把它寫成分享文章，一方面做個備忘紀錄，另一方面，也是當作紀念
。

首先的關鍵是是內容寛度。

原來網頁內容區塊（container）的設計如下：
#container { margin: 0 auto; padding: 0; width: 1024px;
text-align: left;}

寛度是固定的1024px，這樣在手機瀏覽時有兩個問題：

一、首先，載入速度很慢，因為手機分辨率沒這麼高，在載入時必須一直解
析，試想一頭蛇，硬要將一隻大象吞進肚子裡，那個速度是會有多慢。

二、再者，等到很久，終於載入完成後，因為手機分辨率遠低於1024px，以
實際情況來看，約只有1/3，手機只能顯示內容的一部分，必須移動拖曳，才
能繼續閱讀。如果用兩指的縮放方式，將網頁寛度調到和手機螢幕相同，會
發現文字變得很小，圖片大小也會變得很奇怪。

解決方法，是將寛度(width）以百分比設置，例如將「1024px」改為「90％
」：

#container {margin: 0 auto; padding: 0; width: 90%; text-align:
left;}

如此設置之後，手機瀏覽該網頁的速度，會有很大的改善，而且手機一打開
網頁，文章寛度剛好等於螢幕，不管是在五吋的小米，還是3.5吋的iPhone
4，真的是很方便。


延伸閱讀（Wordpress圖片管理）：

前言：

http://www.b88104069.com/archives/796

上傳：

http://www.b88104069.com/archives/830

文字說明：

http://www.b88104069.com/archives/679

--

贊贊小屋作品集：
http://www.b88104069.com/archives/category/story

贊贊小屋粉絲團：
https://www.facebook.com/zanzanstory

--