这两天经理给我一个小任务，其实是特别简单的一个任务，将一个表单页面改为手机版网页。对于自认为写个网页小case的我来说，本应该是不在话下，而我却用了两天的时间才将它搞定。这期间也不免心急如焚。虽然最终完成了，经理说ok了，但对于追求完美的我来说，这个手机版的网页做的太。。。
说实话这对于我来说真是一个打击。这也正说明了我学艺不精，修为尚浅。也正因为如此，请教了一位qq好友，据知他可是前端开发的大虾，是他推荐我一本书，当下我就在自己的书库找了出来，并一夜读完了。虽然一夜无眠，但是对技术的渴求依然显得很兴奋，收获很大，也是很值得，好歹我的问题总算是解决了，笨鸟总是要先飞的啊，尤其是对我这种智商堪忧的人。再次特别感谢我的那位好友，感谢他给我的指点。
以前对于这种网页设计，我都不屑于打草稿，闭着眼睛都能把它写出来，并对各个浏览器的兼容也相当完美，而现在这个小小的提交表单却让我的骄傲一下子烟消云散。
现在我将我在此开发中遇到的问题总结一下，也希望更专业的人给予评论和指点。
首先，我要明确的知道自己设计的这个网页是给手机端用户使用的。
我所犯的错误就是还本着原来做web html 的方式去设计。
说起手机端页面的开发，那么他与web html有什么区别呢？
通过查了很多资料，大约有这么几点：
1. mobile端可解析的特殊meta标签，例如viewport.
2. 硬件水平相对PC有明显不足(android下尤其明显）
3. 都会部分支持CSS3，HTML5特性，说部分支持，是指他们并不像PC端一样全部支持，不同系统版 本支持程度不同。
4. 特殊的事件类型，touchstart, touchmove, touchend, orientationchange 等等。
5. 某些时候要兼顾到横屏的设计。
6. 有些未知的移动终端webkit的bug，此类问题很诡异，通过前端技术只能绕过它，而不能直接解决它。
欢迎补充啊~~~
知道了这些区别，那就要具体问题具体问题具体分析了。
在写的过程中，对于整个布局做出了一些调整，这其中，让我更深刻的认知到 mobile端可解析的特殊meta标签，例如viewport. 的重要性。它的使用在设备上整个显示效果，起着举足重轻的作用。
现在我将这个标签的使用总结如下：
在我的整个项目中，我使用了下面的<mata>
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
name="viewport" 是属性。
content="initial-scale=2.0的意思是将页面放大两倍（同理，0.5 表
示缩小一半，3.0 表示放大3 倍），
同时width=device-width告诉浏览器页面的宽度应该等于设备宽度。
还可以禁止用户缩放，不过缩放是一个重要的辅助功能，所以在实践中很少禁用。
user-scalable=no 即是禁止缩放。
另一个问题就是 自适应网页设计。
"自适应网页设计"的核心，就是CSS3引入的Media Query模块。 它的意思就是，自动探测屏幕宽度，然后加载相应的CSS文件。
<linkrel="stylesheet"type="text/css"media="screen and (max-device-width: 400px)"href="tinyScreen.css"/>
上面的代码意思是，如果屏幕宽度小于400像素（max-device-width: 400px），就加载tinyScreen.css文件。
<linkrel="stylesheet"type="text/css"media="screen and (min-width: 400px) and (max-device-width: 600px)"href="smallScreen.css"/>
如果屏幕宽度在400像素到600像素之间，则加载smallScreen.css文件。 除了用html标签加载CSS文件，还可以在现有CSS文件中加载。
@import url("tinyScreen.css") screen and (max-device-width: 400px);
还有CSS的@media规则
.CSS的@media规则 同一个CSS文件中，也可以根据不同的屏幕分辨率，选择应用不同的CSS规则。
@media screen and (max-device-width: 400px) { .column { float: none; width:auto; } #sidebar { display:none; } }
上面的代码意思是，如果屏幕宽度小于400像素，则column块取消浮动（float:none）、宽度自动调节（width:auto），sidebar块不显示（display:none）。
图片的自适应（fluid image） 除了布局和文本，"自适应网页设计"还必须实现图片的自动缩放。 这只要一行CSS代码：
img { max-width: 100%;} 这行代码对于大多数嵌入网页的视频也有效，所以可以写成：
img, object { max-width: 100%;}
老版本的IE不支持max-width，
所以只好写成： img { width: 100%; }
此外，windows平台缩放图片时，可能出现图像失真现象。这时，可以尝试使用IE的专有命令： img { -ms-interpolation-mode: bicubic; } 或者，Ethan Marcotte的imgSizer.js。
addLoadEvent(function() { var imgs = document.getElementById("content").getElementsByTagName("img"); imgSizer.collate(imgs); });
目前就这些问题，其实更希望遇到更多的问题，这样才能时刻进步啊！哈哈~~~~
本文出自 “张宇欢” 博客，请务必保留此出处http://acatlove.blog.51cto.com/6762895/1357379