贊贊小屋

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

我的網頁手機版用WPtouchPro這個插件

一直以來,我的網頁手機版,都是用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,真的是很方便。

手機版贊贊小屋網頁

本網站所有內容皆受版權保護,网站备案编号:苏ICP备14051307号-1