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