[心得] 如何设定CSS寛度以打造手机网页

楼主: moodyblue   2016-04-22 23:42:55
如何设定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
作者: imhaha (嘿嘿)   2016-04-23 00:25:00
我看了什么= = 整篇重点: width: 90%
作者: ymcheung (ymc)   2016-04-23 00:42:00
不说还以为是中国的网页直接转繁体
作者: abcccbbs (保险经纪人业务副理)   2016-04-23 01:06:00
一楼说的好直接xD
作者: pm2001 (做个盾牌眼球兵吧)   2016-04-23 02:03:00
根本就是吧 一堆支那用语
作者: eggimage (目前没有名片)   2016-04-23 03:39:00
XDD 而且这种写法也不能当万灵丹...
作者: Canboo (啃布先生)   2016-04-23 09:33:00
改成90%还不是一样是吃一头象,你是不是误会什么了?
作者: spfy (spfy)   2016-04-23 09:35:00
难怪觉得好眼熟 原PO是WICer 在wic版有看过
作者: s89227 (Kei)   2016-04-23 10:13:00
不觉得vw跟vh比较好吗?90%有时候还是会爆版欸@@"
楼主: moodyblue   2016-04-23 16:35:00
我网页是看大陆网站自学的,所以的确术语都是支那话vw、vh老实说我不知道是什么,哈,我是素人自学。
作者: GoalBased (Artificail Intelligence)   2016-04-23 22:15:00
人家在冲流量拉
作者: eggimage (目前没有名片)   2016-04-24 17:16:00
vh vw也要考虑IE8的问题

Links booklink

Contact Us: admin [ a t ] ucptt.com