最近在研究手机网站的开发，发现制作手机网站并不像想象的那么难。 为什么会这样呢？ 想象一下： 我们甚至可以做传统的电脑网站。 甚至连一个小手机网站都做不到吗？ 其实手机网站是迷你电脑网站！ 为什么觉得很难，觉得拿不出手吗？
我认为mhdpd有以下几点。
一、没有完整的思路和流程
如果能像制作网站的流程一样了解其流程的话，我觉得制作手机网站并不困难！ 真正困难的是你没有想法。
二.无法高度预测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元素中有大量的类拥挤。 它打破了优秀网页设计的基本规则之一，HTML不再有意义，内容和表达不再分离。 前端纯粹主义者觉得这相当讨厌，认为使可扩展性、可复用性和可维护性面临更大的挑战。
2. Bootstrap太重了
直接说，CSS和JS有点大。 CSS压缩后115k、JS压缩后35k
如果想使用Bootstrap的所有功能，必须仔细考虑资源的加载时间。 当然，在一些地方这可能不是问题，但新西兰的互联网必须穿越太平洋，数据到达那里将会很慢。 所以我会考虑你的目标市场。
我相信任何框架都有优点，同时也有缺点。 因为没有一个产品是完美的，所以根据自己的实际情况选择。 关于其他框架，请不要过多说明。 如果让百度高兴的话，我相信你会找到你想要的答案。
手机端的开发流程
二、手写手机网站
一般来说，自己手动开发手机网站时，基本上可以分为两类。 一种是通过在网页的标题中添加元标记来实现的(与网页是以html5的格式开发的)。 另一个通过CSS3的Media标签(媒体查询)来实现。 不了解媒体查询的人可以看看这篇文章。 是响应型布局。
下面详细说明添加元标签创建手机网站。
基本上只要在网页的开头添加四个元标签，就可以实现手机网站的框架。 看看是哪个元标签。
1、添加视口标签
metaname=' viewport ' content=' width=device-width，initial-scale=1.0，maximum-scale=1.0，用户- scalable=
高级属性：
宽度--- -视图端口的宽度(宽度=设备宽度意味着宽度等于设备宽度) )。
height ------ viewport的高度(height=device-height意味着高度等于设备的宽度)
初始比例--- -初始比例
最小比例-----用户可以缩放的最小比例
最大比例-----用户可以缩放的最大百分比
用户可缩放-----用户是否可以手动缩放
关于视口的详细原理和知识点，就百度吧。 这里不详细说明。
2、禁止把数字换成电话号码
元数据='格式-检测'内容=' telephone=否' /
通常，在IOS和Android系统中，某个长度的数字默认为电话号码。 即使不添加，默认情况下也会显示为电话。 so，我需要取消这个。
3、iphone设备中的safari专用元标签
lt
;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" rel="external nofollow" 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> 大家好！我是mhdpd，这是我的第一个手机网页哦！ </div></body></html>
下面是我做的基于微信二次开发的手机页面案例：
点击预览
其实在移动端的开发让我纠结的是在字体单位上的选择。
随着CSS3的兴起，有一种叫rem的单位渐渐的出现在我们的视野中。它是一个相对单位，能实现响应式的那种。它是相对于html根元素来设置当前文字大小，或者宽高的。因为它是一个不固定值,不像PX。听说在PX这个单位在PC和移动的解析不同，所以才使用rem的。这点我也不是很清楚，也请教了一些做手机网站的yqdrjb，了解了一些信息。
原来大部分的人依旧是使用PX来布局，rem都用的少。目前来说，就移动端的淘宝首页就是采用rem来作为单位来布局的。关于使用rem单位这个问题以及它的好处：还得需要大神来解答这个问题，毕竟我也只是刚接触。
关于手机网站的调试问题
一般我们采用的：在浏览器调试+真机测试，因为浏览器毕竟只是一个模拟工具，实际开发的话，我们还得用真机去测试。
比如：（Android类手机，iPhone5、5s、6、6Plus...）
而在浏览器上测试，可以chrome（谷歌浏览器）的F12调试工具：有个手机样的小图标，点击就能模拟手机测试。
如下图：
手机测试效果图
或者用火狐的测试工具：按shift+ctrl+M进行查看。
写在最后：其实等你真正熟悉做手机网站这套流程后，你会发现做手机网站没有你想象的那么难，真正难的是不知道如何去下手。对于移动端的JS效果可能和PC端有些不同，因为移动端有移动端的事件，这也是我为什么老是强调学JS，是学原生JS，而不是学Jquery。我的下篇文章就会讲到"为什么学JS要学原生JS"，喜欢的朋友可以关注下博客。(以上均是mhdpd个人经验，如有不足的地方可以指出，相互学习！)
觉得本篇文章，对你有帮助的话。你可以选择赞助mhdpd博客！支付宝：18670701903 因为有你的支持，我才走得更远！ (*^__^*) ...
本文由mhdpd博客原创出品，如需转载请注明出处。
本文出处：http://www.duanliang920.com/learn/web/html5/304.html
您要是觉得mhdpd