我认知的手机端页面开发

浏览数：29 / 时间：2015年06月11日

这两天经理给我一个小任务，其实是特别简单的一个任务，将一个表单页面改为手机版网页。对于自认为写个网页小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>

name="viewport" 是属性。

content="initial-scale=2.0的意思是将页面放大两倍（同理，0.5 表

示缩小一半，3.0 表示放大3 倍），

同时width=device-width告诉浏览器页面的宽度应该等于设备宽度。

还可以禁止用户缩放，不过缩放是一个重要的辅助功能，所以在实践中很少禁用。

user-scalable=no 即是禁止缩放。

另一个问题就是自适应网页设计。