CSSer课堂

2011年了，总结下2010年WAP开发的一些经验积累。
并提供PDF供大家下载，希望我的手机终端的wap开发能对你有用。

手机多终端样式适配策略

了解外界世界及在地铁中打发时间的唯一好办法，开UC看新闻。新闻的链接先点开一堆，新浪，网易，凤凰，搜狐，然后挨个看头条。

以前在看新闻，觉得最耐看，最给力的还是网易wap站，总会有意想不到的新闻焦点不同于其他新闻媒体。可自从丫改版了，更换了貌似看起来很绚丽的样式之后，我不看了，因为我看到的字体更小，眼睛更加吃力，长时间会有疼痛的感觉。

为了眼睛，我发过反馈意见给网易，临了还留了邮箱，以便联系。不过貌似不怎么搭理我这个忠实的用户，得！以后可以绕行，避免为我的眼睛弄一个隔着玻璃看。

1.基于手机屏幕有限度的尺寸限制，应该让网页能按照用户（手机用户）设定的默认字体尺寸来显示，这样也是延续用户基本的个人需求体验。
2.新闻类的手机网页更不能强制千篇一律的给用户一个字体尺寸，而阻止用户设定查看多文本的内容的默认字体尺寸习惯。
3.尊重用户反馈，即使你觉得他可以忽略不计。

在WAP网站开发时，字体一定要斟酌而定，避免发生用户不能设置字体大小，设置的字体类型与期望不同的情况出现。方法很简单：

1.设置相对字体不设置绝对（px）字体
2.不要画蛇添足设置字体类型
3.触屏手机应单独处理（Android/iPhone/iPod/iPad）字体尺寸，按钮大小

具体实现方式：
font-size:medium;
即就是，设置中等字体。（用户手机的显示一般为大，中，小）这样可以沿用用户的手机视觉习惯。

一个实用的样式设置例子：
html,body,p,form,div,table,textarea,input{font-size:medium;vertical-align:middle}/* 千万不要省心而用[*]处理 */
body{background:#5e99ce;color:#414141;padding:1px}
form{border:0;margin:0;padding:1px}
img{border:0;vertical-align:middle}
textarea{width:95%;}/* 长文本输入框在设置 100% 后很多会溢出 */

另外需要注意的两个重要的Meta标签：

meta name=”viewport” content=”width=device-width; initial-scale=1.0; minimum-scale=1.0; maximum-scale=2.0″

meta name=”MobileOptimized” content=”240″

这个很重要，具体的用法，还是多搜索下，多看看，加深理解。

有什么要说，敬请留言：

手机浏览器的页面适配是个挑剔的活，需要适配的手机浏览器千奇百怪.所以,我们必须精细的对待页面代码,只有这样才能让我们的页面顺利的被浏览器所解析并正常显示.

这里便引出一个页面书写基本要求：
1.单个标签必须闭合
2.成对标签必须闭合
3.成对标签不允许无内容出现
4.嵌套规则必须遵循

而需要做到以上几点,对于在书写页面以及调试过程中,便需要借助一些验证插件来调试我们所写的页面,那谁谁说:”科学技术是第一生产力”.我得瑟下”懂得借助工具可以提升生产力”.不废话,推荐的页面调试及组合:
Fire Fox① +WMLbrowser② + HTML VALIDATOR③ + Fire Bug④
1) Fire Fox不用介绍了
2) WMLbrowser 用来使用Fire Fox浏览wml格式手机网页
3) HTML Validator 主要用来验证页面标签,网址 http://users.skynet.be/mgueury/mozilla/
4) Fire Bug 这个工具很强大.具体查看http://getfirebug.com/

以上浏览器以及三个组件便是网页调试的组合利器.点击下载wml20_Development-weapon.DOC