HTML5移动端手机网站开发流程

最近一直在研究移动手机网站的开发，发现做手机网站没有想象中的那么难。为什么会这么说呢？我们试想下:我们连传统的pc网站都会做，难道连一个小小的手机网站难道都搞不定吗？其实手机网站就是一个微缩版的pc网站罢了！至于为什么觉得难、觉得无从下手。

觉得有以下几点：

一、没有完整的思路和流程

就像做网站的流程一样，如果你能知道它的流程，我相信就不会觉得做手机网站难！真正难的是你没有思路。

二、把html5这门技术想的高深莫测

好像觉得学会用html5+css3做手机网站，就相当于学会了顶尖的绝世武功。其实你错了！不要把html5这玩意想的太高深，其实做手机网站，真正意义上用不到什么的html5的强大功能。(可能对于一些不懂什么技术的小白而言：你的手机网站是用html5+css3做的啊，简直牛逼呀！能用上目前互联网上最新最前沿的技术。其实明眼人一看，就知道是用什么技术做的。俗话说的好：”外行看热闹，内行看门道”)

好了扯了这么多，下面就说说怎么来开发移动手机网站吧！

基本上开发手机网站，可大致分为两大类。一类是用框架开发手机网站。一类是自己手写手机网站。

一、框架开发手机网站

一般用现在常用的开发框架有：目前web前端最火的框架（bootstrap）、jquery mobile..当然可能还有一些移动端开发的框架，这些我就没具体去研究过。

为什么说bootstrap是目前前端最火热的开发框架呢？

因为bootstrap自带响应式布局（栅格系统），而且能做到移动设备优先的原则。

运用bootstrap来开发网站有什么好处呢？

1.不懂设计也可以做网站

就算不懂设计，你的网页在bootstrap的帮助下，也能拥有超高颜值。它强大的内置样式库让你的作品变成。

主要体现在：字体文件和bootstrap自带的u感恩教师节的作文i样式。（为广大不会ui设计的程序员，提供了福音）

2.上手快

你可以专心解决问题，冗繁的细节都丢给bootstrap操心。可以做到一次开发，就可适配所有终端，并且能迅速上手并建出网站原型。还提供很多丰富的插件，就算你不会js，基本能看懂常见的api，网站上的效果，基本能金山重装解决。

缺点：

1.不遵循最佳实践

我们在使用bootstrap时遇到的最大问题之一是你的dom元素上将拥挤大量的类。这打破了良好的web设计基本规则之一，html不再有语义，而且内容和表示不再分离。前端纯粹主义者会觉得这相当令人讨厌，以为它使可扩展性、重用性和维护性遇到了更大的挑战。

2. bootstrap 太重

直接点说：就是css和js有点点大。css压缩后115k,js压缩后35k

如果你想要使用bootstrap的所有功能，你应该好好考虑资源的加载时间。当然，对于一些地方这可能不是问题，但是在新西兰互联网不得不横跨太平洋，这时数据达到那儿将是很缓慢的。因此考虑你的目标市场。

相信任何框架都有它的优点，同时也是有它的缺点的。没有一个产品是很完美的，所以根据自身实际情况进行选择。至于一些其它框架暂时不做过多的解释了，相信只要你肯愿意百度一下，就可以找到你想要的答案。

移动手机端开发流程

二、手写手机网站

一般我们自己手动开发手机网站的话，基本可以划分两类来做到。一类是通过在网页头部添加meta标签进行实现（网页指html5的格式来开发）。另一类是通过css3的media标签（媒介查询）来实现。不了解媒介查询的朋友，可以看看这篇文章：响应式布局。

在这里我们详细讲解下,利用添加meta标签来做手机网站。

基本在网页头部我们只需添加四个meta标签就可以实现一个手机网站的框架。我一起来看看是哪些meta标签。

1、添加viewport标签

<meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, ur-scalable=0″ />

详细属性：

width —- viewport的宽度（width=device-width意思是：宽度等于设备宽度）

height —— viewport的高度（height=device-height意思是：高度等于设备宽度）

initial-scale —– 初始的缩放比例

minimum-scale —– 允许用户缩放到的最小比例

maximum-scale —– 允许用户缩放到的最大比例

ur-scalable —– 用户是否可以手动缩放

关于viewport的详细原理和知识点，各位就百度吧！在这里我就不做详细的讲解了。

2、禁止将数字变为电话号码

<meta name=”format-detection” content=”telephone=no” />

一般情况下，ios和android系统都会默认某长度内的数字为电话号码，即使不加也是会默认显示为电话的，so，取消这个很有必要！

3、iphone设备中的safa怎么对女孩子表白ri私有meta标签

<meta name=”apple-mobildnf物品移动指令e-web-app-capable” content=”yes” />

它表示：允许全屏模式浏览，隐藏浏览器导航栏

4、iphone的私有标签

<meta name=”apple-mobile-web-app-status-bar-style” content=”black”>

它指定的iphone中safari顶端的状态条的样式

默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明）

另外还有一个个性化的link标签，它支持用户将网页创建快捷方式到桌面时，其图标变为我们自己定义的图标。比如手机腾讯网上的标签：

<link rel=”apple-touch-icon-precompod” href=”/d/file/titlepic/logo_icon.png”>

不过腾讯对这个png图标的命名并不规范，常规我们要求文件名应为 apple-touch-icon.png 或 apple-touch-icon-precompod.png ，前者的命名ios会为这个图标自动添加圆角、阴影和高亮覆盖层，后者则不会添加这些效果。

手机网站基本框架代码：

xml/html code
复制内容到剪贴板

下面是我做的基于微信二次开发的手机页面案例：

其实在移动端的开发让我纠结的是在字体单位上的选择。

随着css3的兴起，有一种叫rem的单位渐渐的出现在我们的视野中。它是一个相对单位，能实现响应式的那种。它是相对于html根元素来设置当前文字大小，或者宽高的。因为它是一个不固定值,不像px。听说在px这个单位在pc和移动的解析不同，所以才使用rem的。这点我也不是很清楚，也请教了一些做手机网站的高手，了解了一些信息。

原来大部分的人依旧是使用px来布局，rem都用的少。目前来说，就移动端的淘宝首页就是采用rem来作为单位来布局的。关于使用rem单位这个问题以及它的好处：还得需要大神来解答这个问题，毕竟我也只是刚接触。

关于手机网站的调试问题

一般我们采用的：在浏览器调试+真机测试，因为浏览器毕竟只是一个模拟工具，实际开发的话，我们还得用真机去测试。

比如：（android类手机，iphone5、5s、6、6plus…）

而在浏览器上测试，可以chrome（谷歌浏览器）的f12调试工具：有个手机样的小图标，点击就能模拟手机测试。

如下图：

手机测试效果图

或者用火狐的测试工具：按shift+ctrl+m进行查看。

写在最后：其实等你真正熟悉做手机网站这套流程后，你会发现做手机网站没有你想象的那么难，真正难的是不知道如何去下手。对于移动端的js效果可能和pc端有些不同，因为移动端有移动端的事件，这也是我为什么老是强调学js，是学原生js，而不是学jquery。我的下篇文章就会讲到”为什么学js要学原生js”，喜欢的朋友可以关注下博客。

原创作者：段亮博客

本文链接：