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

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

本文主要为您介绍HTML5手机网站开发流程。 想开发手机网站的朋友可以参考一下。

最近一直在研究手机网站的开发，发现做手机网站并没有想象中那么难。 你为什么这么说？ 试想一下：我们连传统的PC网站都可以做，难道连一个小的手机网站都做不了吗？ 其实手机网站只是PC网站的缩小版！ 至于为什么难，我觉得无从下手。

我认为有以下几点：

1.没有完整的思路和流程

就像做网站的过程一样，如果你能知道它的过程，相信做手机网站也不难！ 真正的困难是你没有想法。

二、html5的技术深不可测

看来学习用html5+css3做手机网站就相当于学习了顶级绝世武功。 其实你错了！ 不要对html5考虑太深。 其实，做手机网站并不需要html5的强大功能。 （可能对于一些不太懂技术的新手来说：你的手机网站是用HTML5+CSS3做的，牛逼！可以用到互联网上最新最前沿的技术。其实，有眼光的人一看就知道是用什么技术做的。俗话说：“外行看热闹，内行看路”）

好了，说了这么多，我们来说说如何开发手机网站吧！

基本上，移动网站的开发大致可以分为两类。 一种是使用框架开发手机网站。 一个是手写手机网站。

1. 手机网站开发框架

一般常用的开发框架有：最流行的前端框架（），..当然，可能还有一些移动端的开发框架，我没有详细研究过。

为什么它是目前最火的前端开发框架？

因为它有自己的响应式布局（网格系统），并且可以实现移动设备优先的原则。

用它来开发网站有什么好处？

1. 不懂设计也能做网站

即使您不会设计，您的网页也可以在我们网站的帮助下拥有超高的价值。 其强大的内置样式库可让您的作品脱颖而出。

主要体现在：字体文件和内置的UI样式。 （对于不懂UI设计的程序员来说，提供了福音）

2. 快速上手

您可以专注于解决问题，而不必担心繁琐的细节。 一次开发，适配所有终端，可快速上手搭建网站原型。 还提供了很多丰富的插件，即使你不会JS，也能基本看懂常用的API，网站上的效果也基本可以解决。

缺点：

1. 不遵循最佳实践

我们在使用它时遇到的最大问题之一是用大量的类挤满了您的 DOM 元素。 这打破了良好网页设计的基本规则之一，HTML 不再具有语义，内容和表示不再分离。 前端纯粹主义者会发现这相当烦人，因为它使可扩展性、可重用性和可维护性成为更大的挑战。

2.太重

说白了：CSS和JS有点大。 CSS压缩后115k，JS压缩后35k

如果要使用所有功能，则应考虑资源加载时间。 当然，对于某些地方这可能不是问题，但在新西兰，互联网必须穿越太平洋，数据到达那里的速度会很慢。 因此，请考虑您的目标市场。

我相信任何框架都有其优点和缺点。 没有一款产品是完美的，所以要根据自己的实际情况来选择。 至于其他一些框架，我暂时就不过多解释了。 相信只要你肯百度，一定能找到你想要的答案。

移动端开发流程

2.手写手机网站

一般我们自己手动开发手机网站的话，基本上可以分为两类。 一种是通过在网页头部添加meta标签实现（网页参考html5格式开发）。 另一种是通过CSS3的Media标签（媒体查询）实现的。 不了解媒体查询的可以看这篇文章：响应式布局。

在这里我们详细说明如何通过添加元标记制作移动网站。

基本上我们只需要在网页的头部添加四个meta标签就可以实现一个手机网站的框架。 让我们来看看元标记是什么。

1.添加标签

登录复制

详细属性：

width ----宽度（width=-width表示：宽度等于设备宽度）

------ 高度（=- 表示：高度等于设备宽度）

-scale ----- 初始缩放

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

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

user- ----- 用户是否可以手动缩放

具体原理和知识点请自行百度！ 我不会在这里详细解释。

2.禁止将数字转为电话号码

一般情况下，IOS和系统会默认一定长度内的数字作为电话号码，即使不添加也会默认显示为电话号码，所以取消这个是很有必要的！

3.设备中的私有元标记

意思是：允许全屏模式浏览，隐藏浏览器导航栏

4. 自有品牌

它指定了顶部状态栏的样式

默认值为(white)，可设置为black(黑色)和black-(灰色半透明)

另外还有个性化的链接标签，支持用户在桌面创建网页快捷方式，图标会变成自己定义的图标。 比如手机腾讯网站上的标签：

不过腾讯并没有规范这个png图标的命名。 通常，我们要求文件名为 apple-touch-icon.png 或 apple-touch-icon-.png。 以前的命名iOS会自动给这个图标加上圆角和阴影。 并突出显示不添加这些效果的叠加层。

手机网站基本框架代码：

XML/HTML 代码复制内容到剪贴板

  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
   
  
    
  
  
  
    
  
  
        大家好！我是段亮，这是我的第一个手机网页哦！   
  
    
  
  
  
  

登录复制

下面是我做的一个基于微信二次开发的移动端页面案例：

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

随着CSS3的兴起，一个叫做rem的单位逐渐出现在我们的视野中。 它是一个可以实现响应性的相对单元。 它是相对于 html 根元素来设置当前文本大小，或者宽度和高度。 因为它是固定值，不像PX。 听说PC端和手机端PX单元的分辨率不一样，所以用的是rem。 这点我不是很清楚，也请教了一些做手机网站的高手，了解了一些资料。

原来大部分人还是用PX来布局，很少用到rem。 目前移动端的淘宝首页都是以rem为单位进行布局的。 关于使用rem单位的问题和它的好处：这个问题还是需要高手解答一下，毕竟我也是新手。

关于手机网站的调试问题

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

例如：（类手机、5s、6、6Plus...）

在浏览器上测试，可以使用F12调试工具（谷歌浏览器）：有一个类似手机的小图标，点击可以模拟手机测试。

如下所示：

手机测试效果图

或者使用的测试工具：按shift+ctrl+M查看。

写在最后：其实，当你真正熟悉了手机建站的流程之后，你会发现，手机建站并没有想象中那么难。 真正的困难是不知道如何开始。 JS在移动端的效果可能和PC端有些不同，因为移动端有移动端事件，这也是我一直强调学习JS，学习原生JS，而不是学习的原因。