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

  • 编辑时间: 2015-04-04
  • 浏览量: loading
  • 作者: 段亮

最近一直在研究移动手机网站的开发,发现做手机网站没有想象中的那么难。为什么会这么说呢?我们试想下:我们连传统的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的所有功能,你应该好好考虑资源的加载时间。当然,对于一些地方这可能不是问题,但是在新西兰互联网不得不横跨太平洋,这时数据达到那儿将是很缓慢的。因此考虑你的目标市场。

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

移动手机端开发流程

二、手写手机网站

一般我们自己手动开发手机网站的话,基本可以划分两类来做到。一类是通过在网页头部添加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的私有标签

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

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

默认值为default(白色),可以定为black(黑色)和black-translucent(灰色半透明)

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

<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会为这个图标自动添加圆角、阴影和高亮覆盖层,后者则不会添加这些效果。

手机网站基本框架代码:

<!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调试工具:有个手机样的小图标,点击就能模拟手机测试。

如下图:

手机测试效果图

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

写在最后:其实等你真正熟悉做手机网站这套流程后,你会发现做手机网站没有你想象的那么难,真正难的是不知道如何去下手。对于移动端的JS效果可能和PC端有些不同,因为移动端有移动端的事件,这也是我为什么老是强调学JS,是学原生JS,而不是学Jquery。我的下篇文章就会讲到"为什么学JS要学原生JS",喜欢的朋友可以关注下博客。(以上均是段亮个人经验,如有不足的地方可以指出,相互学习!)

觉得本篇文章,对你有帮助的话。你可以选择赞助段亮博客!支付宝:18670701903 因为有你的支持,我才走得更远! (*^__^*) ...

本文由段亮博客原创出品,如需转载请注明出处。

本文出处:http://www.duanliang920.com/learn/web/html5/304.html

如果您觉得文章对你有帮助,可以进行打赏。
打赏多少,您高兴就行,谢谢您对段亮这小子的支持! ~(@^_^@)~

微信扫一扫 微信打赏

支付宝扫一扫 支付宝打赏

评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
  • 轧花网厂
    2017-01-01 15:26:19发表

    如何快速的收录手机网站呢?

  • 舟儿
    2016-11-17 14:14:58发表

    对于我这种前端小菜鸟,文章十分受用,博主要继续分享哦

  • (-_-)Locozan
    2016-11-06 16:06:50发表

    自己写啊,各种屏幕分辨率

  • 蓝天
    2016-10-10 14:53:25发表

    感谢博主分享。

  • 乖怪人
    2016-09-05 14:16:26发表

    博主,不用框架怎样实现响应式?

  • 乖怪人
    2016-09-05 14:15:00发表

    学到很多,谢谢博主分享

  • peihong
    2016-06-28 17:57:33发表

    很不错,感谢博主分享!

  • DbLittleAi
    2016-06-16 00:52:41发表

    我能不能转载到自己的微博或者博客呢

  • 异次元人类
    2016-06-02 23:44:14发表

    哈哈,对的,要实践

  • 段亮自媒体博客
    2016-06-01 21:16:34发表

    嗯,其实写这篇文章,只是一个抛砖引玉的做法!文章里面还有很多不足的地方,但是希望能用最通俗的语言,去解释这些东西。其实,在我觉得一定得自己多实践才行!

  • 异次元人类
    2016-05-29 01:05:28发表

    大局讲的挺好的,不过不太全

  • 段亮自媒体博客
    2016-05-07 13:06:54发表

    你可以去了解下viewport这个东西,其实不设置最大宽度也行。布局的话:一般可以采用百分比布局和弹性布局,如果说想简单快速开发,可以看下flexible这篇文章。之前写这篇文章也是在摸索阶段,还望见谅!

  • 梦动
    2016-05-05 22:21:59发表

    博主,你讲到的手写手机网站第一种方式采用meta标签来实现,设置.viewport{ max-width:640px; min-width:300px; margin:0 auto;},如果屏幕宽度大于640px,岂不左右留白很多呢?

  • 微信分销
    2016-04-25 10:55:10发表

    不错,赞一个。

  • 铃动心间
    2016-04-11 16:41:40发表

    照着博主的页面模仿了一下,一直不知道怎么下手布局,虽然问题还很多但总算是跨出了第一步,感谢分享~~

  • 段亮自媒体博客
    2016-03-19 12:00:01发表

    什么问题,请说。

  • 唐志军-佛山市同图金属制
    2016-03-17 17:24:28发表

    能告诉我你联系方式么?我有几个问题想请教,不会白请教的。

  • 走趣
    2016-02-21 19:38:32发表

    好站,怎么把排名坐上去的

  • 冲孔网
    2016-01-09 15:01:00发表

    未来之趋势啊!

  • osblog.net
    2015-11-10 13:46:33发表

    不错啊,我也正在学

  • 嫩模李凯馨
    2015-10-26 18:12:32发表

    [困]

  • 流泪的风
    2015-10-26 17:31:41发表

    webapp只是简单的写个页面就完事了?相当于响应式布局?

  • 米米网站目录
    2015-10-24 15:20:37发表

    正在找这方面知识,谢谢了

  • 段亮自媒体博客
    2015-10-22 20:09:24发表

    这是webapp,你所说的那个是app。麻烦你先弄清楚好么?

  • 流泪的风
    2015-10-22 15:04:52发表

    你的这个演示 只是写了一个手机端的样子 正真的怎么打包成apk 还有业务逻辑的书写 根本没有啊

  • 流泪的风
    2015-10-22 15:02:59发表

    你说的全是皮毛啊 真正的怎么整呢

  • 最美丽空姐
    2015-10-20 17:39:07发表

    [gbz起床啦]

  • _@Say No
    2015-08-25 10:32:49发表

    写的不错,就是测试页面并没有完全自适应哦!

  • 段亮自媒体博客
    2015-08-22 10:14:39发表

    感谢“辉”,对于此文章的打赏!

  • 糖芋小煲
    2015-07-19 15:48:58发表

    能加qq好友吗?大神 我刚开始学

  • 段亮自媒体博客
    2015-06-30 09:29:16发表

    那个字体大小,应该是在html上面设置。

  • 婴儿车
    2015-06-11 15:37:58发表

    学习收藏了

  • 吴杰康
    2015-06-04 21:39:35发表

    好像很好用的样子!

  • 段亮自媒体博客
    2015-05-29 09:01:43发表

    移动端?如果是移动端的话,我建议手写,毕竟用框架,会增加网页的体积,这样的话,网页加载也比较慢。

  • shoot小米
    2015-05-29 08:58:48发表

    appcan又是啥 一般用什么好?手写还是框架 初学者

  • 段亮自媒体博客
    2015-04-03 13:48:56发表

    运用那些百度site app之类的,是不能达到你预期效果的

  • 艺小昔Allen
    2015-04-03 13:26:19发表

    我一般直接安装插件,自己写的好,写不出

  • 段亮自媒体博客
    2015-04-03 13:11:08发表

    重在实践!

你也想建立一个独立博客?

你是否也想打造一个在互联网上的个人品牌,成为一个家喻户晓的人物呢?
请点击了解 怎样创建个人博客