始于设计、忠于品质

1. 没有完整的想法和过程 



 就像做网站的过程。 如果你能了解它的流程，相信你不会觉得做一个手机网站难！ 真正的困难在于你没有想法。  



 二、html5技术难测 



 看来学习用html5+css3做手机网站就等于学习了顶级武功。 其实你错了！ 不要过多考虑 html5。 其实做手机网站的话，是不会真正用上html5的强大功能的。  （也许对于一些不懂技术的新手来说：你的手机网站是用HTML5+CSS3做的，太棒了！你可以使用互联网上最新最前沿的技术。其实，有眼光的人看的时候 ，我知道是用什么技术来做的。俗话说：“外行看热闹，内行看门道”）



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



 主要开发手机网站，大致可以分为两类。 一是用框架开发移动网站。 一种是自己手写的手机网站。  



1。 移动网站开发框架



 常用的开发框架有：目前最流行的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的所有功能，你应该仔细考虑资源加载时间。 当然，这对某些地方来说可能不是问题，但在新西兰，互联网要跨越太平洋，此时数据到达那里会很慢。 因此，请考虑您的目标市场。  



 我相信任何框架都有其优点和缺点。 没有完美的产品，请根据您的实际情况选择。 至于其他一些框架，我暂时不做过多解释。 相信只要你愿意百度，都能找到你想要的答案。  



 h5开发流程



 2.手写手机网站



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



这里详细讲解，使用添加meta标签制作移动网站。  



 基本上我们只需要在网页头部添加四个meta标签就可以实现一个移动网站框架。 让我看看有哪些元标记。  



1、添加视口标签





详细属性：



width----视口的宽度（width=device-width表示：宽度等于设备的宽度）

height ------ 视口的高度（height=device-height 表示：高度等于设备的宽度）

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

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

maximum-scale ----- 最大缩放比例 user is allowed to scale to 

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

 viewport的详细原理和知识点请百度！ 我不会在这里详细解释。  



2。 禁止将号码转为电话号码。  





 一般IOS和Android系统都会默认一定长度以内的号码作为手机号码，即使不添加也会默认显示为手机，所以，取消 这！  



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





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



4、iphone  private label 



指定iphone中safari顶部状态栏的样式 



 默认值为default（白色），可以设置为黑色（黑色 ) 和 black-translucent (gray translucent) ) [H]

 还有一个个性化的链接标签，可以让用户在创建网页的时候创建一个桌面快捷方式，它的图标变成我们自己定义的图标 . 比如手机腾讯网站上的标签：



 但是腾讯并没有规范这个png图标的命名。 一般我们要求文件名是apple-touch-icon.png或者apple-touch-icon-precomposed .png，前者的命名iOS会自动给这个图标添加圆角、阴影和高光叠加，而后者不会 添加这些效果。