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

一、框架开发手机网站

一般用现在常用的开发框架有：目前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的所有功能，你应该好好考虑资源的加载时间。当然，对于一些地方这可能不是问题，但是在新西兰互联网不得不横跨太平洋，这时数据达到那儿将是很缓慢的。因此考虑你的目标市场。

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

二、手写手机网站

一般我们自己手动开发手机网站的话，基本可以划分两类来做到。一类是通过在网页头部添加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的详细原理和知识点，各位就百度吧！在这里我就不做详细的讲解了。

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

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

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

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

<meta name="apple-mobile-web-app-capable" content="yes" />

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

4、iphone的私有标签它表示：允许全屏模式浏览，隐藏浏览器导航栏

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

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

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

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

1
<link rel="apple-touch-icon-precomposed" href="http://3gimg.qq.com/wap30/info/info5/img/logo_icon.png">

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

手机网站基本框架代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!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>

HTML5移动端手机网站开发流程的更多相关文章

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

    手机移动端网站开发流程HTML5 最近一直在研究移动手机网站的开发,发现做手机网站没有想象中的那么难.为什么会这么说呢?我们试想下:我们连传统的PC网站都会做,难道连一个小小的手机网站难道都搞不定吗? ...

  2. 制作移动端手机网站过程中的SEO优化方法技巧

    据国内三大运营商数据来看,中国的手机用户数已达10亿,超过2/5的移动用户每个月都会从手机终端访问网页,如今的移动端手机网站比例肯定有提升,但是对于这些存在的移动版本网站来说,马海祥查看了很大一部分手 ...

  3. asp.net 网站开发流程总结

    由于这学期要做asp.net的网站开发,导师让我们在前期做详细的计划说明,时间安排.由于网站开发流程不知道,以及需要学什么指示都是盲懂,所以计划安排需在了解大致流程之后才能做出来,一下是询问同学和在网 ...

  4. 第零章 HTML启蒙知识与网站开发流程

    Web前端启蒙知识:1.软件架构模式a)B/S架构:Browser-Server 浏览器服务器模型b)C/S架构:Client-Server 客户端服务器模型注1:浏览器是运行网页的应用程序注2:B/ ...

  5. Bootstrap手机网站开发案例

    Bootstrap手机网站开发案例 一.总结 一句话总结:Bootstrap手机网站开发注意事项(3点):a.引入viewpoint声明,b.通过屏幕宽动态控制元素显隐 c.图片添加自适应 1.Boo ...

  6. JM-1 手机网站开发测试环境搭建

    JM-1 手机网站开发测试环境搭建 一.总结 一句话总结:WEB服务器环境可实现局域网内轻松访问.360wifi可以实现局域网. 二.微网站开发环境: 1.把微网站放到本机wamp环境下,用pc浏览器 ...

  7. 支付宝手机网站支付流程（Node实现）

    前言 公司M站要接入支付宝,借机研究了一下支付宝的支付流程.毕竟,只有公司才能拿到支付接口权限. 主要参考文档: https://doc.open.alipay.com/doc2/detail?tre ...

  8. opencv 手写选择题阅卷 (四)Android端 手机应用开发

    opencv 手写选择题阅卷 (四)Android 手机应用开发 在PC端把代码调通以后开始开发Android 手机应用,因为主要功能代码为C++代码,所以需要通过NDK编译,JAVA通过JNI方式调 ...

  9. WEBAPP开发技巧(手机网站开发注意事项)

    以下只是我个人得总结,如果你有更好的建议,请留言,一起共勉进步!!- -! 1.要响应式开发web,也就是页面必须自适应屏幕大小,可以采用流体布局,如之前的文章(自适应宽度布局),其他具体的小问题可以 ...

随机推荐

  1. [转载]php中深拷贝浅拷贝

    转自:http://cnn237111.blog.51cto.com/2359144/1283163 PHP中提供了一种对象复制的操作,clone.语法颇为简单: $a = clone $b; 1.浅 ...

  2. C#WinForm窗体监听/拦截操作动作

    C#中的事件也是通过封装系统消息来实现的,如果你在WndProc函数中不处理该消息 那么,它会被交给系统来处理该消息,系统便会通过代理来实现鼠标单击的处理函数,因此你可以通过 WndProc函数来拦截 ...

  3. AndroidCityPicker仿IOS选择效果

    近期的一个项目由于android端与IOS端须要同步,所以在城市选择器这里做了一个相似IOS的CityPicker控件,当然由于本人水平问题显示效果比IOS上面还是有一定差距的.OK先让大家看下效果. ...

  4. UI类继承关系图

  5. Mac 下如何安装pip 和xlwt

    sudo easy_install pip pip install xlwt sudo pip install xlwt sudo pip install requests

  6. 通过定时任务 bash 脚本 控制 进程 的 执行时间

    通过定时任务 bash 脚本 控制 进程 的 执行时间

  7. db_create_file_dest

    <span><span>RAC中.将db_create_file_dest改动为本地路径,在创建表空间指定ASM磁盘组的时候还能够直接'+DATA'么?</span> ...

  8. IE8 下背景图标不显示

    如图所示 : 微博微信前方各应有个图标,但是IE8下图标没有显示 css如下 .weibo_icon{background: url(../ieImages/weibo_icon.png)no-rep ...

  9. (C)*p++和*++p区别

    接下来,通过示例彻底理解自增运算符的两种用法(自减的用法与之类似,只不过是加1变成了减1). 1.++i和i++的区别 如清单1(注意代码中的注释): #include <stdio.h> ...

  10. ie的兼容方法，条件注释的方法

    1.终极方法:条件注释 <!--[if lte IE 6]> 这段文字仅显示在 IE6及IE6以下版本. <![endif]--> <!--[if gte IE 6]&g ...