HTML5挪移端手机网站开发流程-百分百源码网

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

发布时间：09/01 来源：未知浏览：关键词：

这篇文章主要为大家介绍了HTML5移动端手机网站开发流程，想要停止移动端手机网站开发的伴侣可以参照一下

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

觉得有以下几点：

一、没有完全的思绪和流程

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

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

仿佛觉得学会用html5+css3做手机网站，就相当于学会了顶尖的绝世武功。其实你错了！不要把html5这玩意想的太高妙，其实做手机网站，真正意义上用不到什么的html5的强大功效。(大概关于一些不懂什么技术的小白而言：你的手机网站是用HTML5+CSS3做的啊，几乎牛逼呀！能用上当前互联网上最新最前沿的技术。其实明眼人一看，就知道是用什么技术做的。俗语说的好："外行看喧闹，内行看门路")

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

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

一、框架开发手机网站

一样用此刻常用的开发框架有：当前Web前端最火的框架（BootStrap）、Jquery mobile..当然大概还有一些移动端开发的框架，这些我就没详细去研讨过。

为什么说BootStrap是当前前端最炽热的开发框架呢？

由于bootstrap自带响应式规划（栅格系统），并且能做到移动设备优先的原则。

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

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

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

主要表现在：字体文件和bootstrap自带的UI样式。（为广阔不会UI设计的程序员，供给了福音）

2.上手快

你可以用心解决问题，冗繁的细节都丢给Bootstrap费心。可以做到一次开发，就可适配所有终端，并且能快速上手并建出网站原型。还供给许多丰硕的插件，就算你不会JS，根本能看懂常见的API，网站上的结果，根本能解决。

缺陷：

1.不遵照最好实践

我们在使用Bootstrap时碰到的最大问题之一是你的DOM元素上将拥堵大量的类。这打破了良好的web设计根本规则之一，HTML不再有语义，并且内容和表示不再别离。前端纯洁主义者会觉得这相当令人厌恶，认为它使可扩展性、重用性和保护性碰到了更大的挑衅。

2. Bootstrap 太重

直接点说：就是CSS和JS有点点大。CSS紧缩后115k,JS紧缩后35k

假如你想要使用Bootstrap的所有功效，你应当好好思考资源的加载时间。当然，关于一些地方这大概不是问题，但是在新西兰互联网不得不横跨太平洋，这时数据到达那儿将是很迟缓的。因此思考你的目标市场。

信赖任何框架都有它的长处，同时也是有它的缺陷的。没有一个产品是很完善的，所以按照本身实际状况停止选中。至于一些其它框架临时不做过多的说明了，信赖只要你肯情愿baidu一下，就可以寻到你想要的答案。

移动手机端开发流程

二、手写手机网站

一样我们本人手动开发手机网站的话，根本可以划分两类来做到。一类是通过在网页头部增加meta标签停止实现（网页指html5的格局来开发）。另一类是通过CSS3的Media标签（媒介查询）来实现。不理解媒介查询的伴侣，可以看看这篇文章：响应式规划。

在这里我们具体讲解下,利用增加meta标签来做手机网站。

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

1、增加viewport标签

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />

具体属性：

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

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

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

minimum-scale ----- 同意会员缩放到的最小比例

maximum-scale ----- 同意会员缩放到的最大比例

user-scalable ----- 会员可否可以手动缩放

关于viewport的具体道理和知识点，各位就baidu吧！在这里我就不做具体的讲解了。

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

一样状况下，IOS和Android系统都会默许某长度内的数字为电话号码，即便不加也是会默许显示为电话的，so，取消这个很有必要！

3、iphone设备中的safari私有meta标签

它表示：同意全屏模式阅读，潜藏阅读器导航栏

4、iphone的私有标签

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

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

别的还有一个个性化的link标签，它支撑会员将网页创立快速方式到桌面时，其图标变为我们本人定义的图标。比方手机腾讯网上的标签：

不外腾讯对这个png图标的命名并不标准，常规我们要求文件名应为 apple-touch-icon.png 或 apple-touch-icon-precomposed.png ，前者的命名iOS会为这个图标主动增加圆角、暗影和高亮覆盖层，后者则不会增加这些结果。

手机网站根本框架代码：

XML/HTML Code复制内容到剪贴板

<!doctype html>  
  
<html>  
  
<head>  
  
<meta charset="utf-8">  
  
<title>手机网站</title>  
  
<meta name="keywords" content="" />  
  
<meta name="description" content="" />  
  
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />  
  
<meta name="format-detection" content="telephone=no" />  
  
<meta name="apple-mobile-web-app-capable" content="yes" />  
  
<meta name="apple-mobile-web-app-status-bar-style" content="black">  
  
<meta name="author" content="duanliang, duanliang920.com" />  
  
<style>  
  
    body{font-size:62.5%;font-family:"Microsoft YaHei",Arial; overflow-x:hidden; overflow-y:auto;}   
  
    .viewport{ max-width:640px; min-width:300px; margin:0 auto;}   
  
</style>  
  
 </head>  
  
    
  
<body>  
  
    <div>  
  
        大家好！我是段亮，这是我的第一个手机网页哦！   
  
    </div>  
  
</body>  
  
</html>

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

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

随着CSS3的鼓起，有一种叫rem的单位慢慢的显现在我们的视野中。它是一个相对单位，能实现响应式的那种。它是相关于html根元从来设定当前文字大小，或者宽高的。由于它是一个不牢固值,不像PX。据说在PX这个单位在PC和移动的解析不一样，所以才使用rem的。这点我也不是很分明，也请教了一些做手机网站的高手，理解了一些信息。

本来大部分的人照旧是使用PX来规划，rem都用的少。当前来说，就移动端的淘宝首页就是采纳rem来作为单位来规划的。关于使用rem单位这个问题乃至它的好处：还得需要大神来解答这个问题，究竟我也只是刚接触。

关于手机网站的调试问题

一样我们采纳的：在阅读器调试+真机测试，由于阅读器究竟只是一个模拟工具，实际开发的话，我们还得用真机去测试。

比方：（Android类手机，iPhone5、5s、6、6Plus...）

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

如下图：