如何设定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,真的是很方便。

手机版赞赞小屋网页


有系統、全面性的學習Excel職場應用,:會計人的Excel小教室PressPlay頻道


當前文章分類:
分享