如何設定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 --

※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 183.206.180.177 ※ 文章網址: https://webptt.com/m.aspx?n=bbs/Blog/M.1459069579.A.CAD.html