如何设定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/cn.aspx?n=bbs/Blog/M.1459069579.A.CAD.html