移动web在当今的发展速度是一日千里，作为移动领域的门外汉，在这段时间的接触后，发现前端开发这一块做一个小小的总结。
1.四大浏览器内核
1.Trident (IE浏览器) :因为在早期IE占有大量的市场份额，所以以前有很多网页是根据这个Trident的标准来编写的，但是实际上这个内核对真正的网页标准支持不是很好，同时存在许多安全Bug。
2.Gecko:( FireFox )优点就是功能强大、丰富，可以支持很多复杂网页效果和浏览器扩展接口，缺点是消耗很多的资源，比如内存。
3.Webkit: ( Chrome/ Safari / UC )优点就是Webkit拥有清晰的源码结构、极快的渲染速度，缺点是对网页代码的兼容性较低，会使一些编写不标准的网页无法正确显示。
4.Presto: ( 欧朋 ) Presto内核被称为公认的浏览网页速度最快的内核，同时也是处理JS脚本最兼容的内核，能在Windows、Mac及Linux操作系统下完美运行。
移动端开发主要对象是手持设备，其中绝大部分是IOS和Android系统，基于Webkit内核，可使用Chrome浏览器调试即可。
2.手机浏览器
浏览器已经逐渐从传统桌面转向手机端，竞争也越来越激烈。目前国内市场主流的手机浏览器：UC、百度、欧朋、QQ、海豚、safari、Chrome，这些浏览器都是基于webkit内核的，兼容性方面不存在问题，同时对html5和css3的支持很好，所以，大胆地应用html5和css3技术吧。
在开始编写webapp时，前端工程师使用HTML5，而放弃HTML4，因为HTML5可以实现一些HTML4中无法实现的丰富的WEB应用程序 的体验，可以减少开发者很多的工作量，当然了你决定使用HTML5前，一定要对此非常熟悉，要知道HTML5的新标签的作用。比如定义一块内容或文章区域 可使用section标签，定义导航条或选项卡可以直接使用nav标签等等。
3.终端分辨率
手机分辨率比PC分辨率要庞杂得多，各种分辨率有木有？大小差距那么大有木有？这在一定程度上给页面制作带来了不小的麻烦。所以针对这样的因素，必须有充分的考虑。考虑到浏览器自适应，需要设计和制作完成各种不同的方法。
1) 市场上主流手机生产商的产品分辨率。经过调研发现，目前主流的手机分辨率为：480*800像素、320*480像素，而1280*720像素（720P）会是接下来的趋势。这些都是很粗略的统计，要有精确的数据需要花费不少的精力，那是数据分析人员的工作。
2) 项目目标群所持设备的分辨率。项目目标群即用户，用户拥有什么样的手机分辨率，从一定程度上来说比第一点来得更加重要，它决定着项目开发的方向。
4.响应式web开发
在编写CSS时，我不建议前端工程师把容器（不管是外层容器还是内层）的宽度定死。为达到适配各种手持设备，我建议前端工程师使用自适应布局模式（支付 宝 采用了自适应布局模式），因为这样做可以让你的页面在ipad、itouch、ipod、iphone、android、web safarik、chrome都能够正常的显示，你无需再次考虑设备的分辨率。
响应式web开发不是一项开创性的技术变革，简单地说，响应式web设计采用了媒体查询、流式布局、液态图片三项技术，把它们组合在一起来制作页面，使得页面不只在传统桌面，在平板电脑和手机上，各种不同的分辨率都能够完美显示。而要做到这点，我觉得不难，请继续往下：
1) 准备工作：
a) 插件安装：window resize。您可以通过以下链接 https://chrome.google.com/webstore/search-extensions/window%20resize下载安装谷歌浏览器插件，安装成功后，当您调整浏览器窗口时，在浏览器右下角会有灰度提示当前窗口和类似于手机视口的大小提示。截图如下：
b) 编辑器安装：subline Text2（支持html5，安装css3扩展失败）、topStyle5（支持css3）。
c) 弄清视口和屏幕的区别。视口是浏览器的内容显示区域，屏幕是设备的物理显示区域。比如视口宽度我们一般用width表示，而屏幕宽度是用device-width来表示。相信做过手机页面的童鞋都经常见过这段代码：
<meta name="viewport" content="width=device-width,initial-scale=1.0">
其中width=device-width就是说把页面宽度设置成和屏幕宽度一样。
d) 响应式设计创意网站收集：http://www.561.cn 。这里有很多响应式Web设计的网站，供您参考和学习。
2) 征途ING：
e) 响应式web设计之媒体查询：
为了减少http请求，我想在css样式表里进行媒体查询会是个不错的选择，而不是在页面head部分使用link进行加载。样式表里的媒体查询格式为：
@media screen and (max-width:960px){}
大括号内部书写样式。该语句相当于判断语句，有两个条件，一个是视口宽度最大不超过960px，screen代表显示屏，这两个条件都具备了，就调用大括号内的样式。
f) 响应式web设计之流式布局：
流式布局以百分比进行布局。最重要是时刻关注元素的父级层，所有的元素都是以父级层为基准。流式布局的应用是为了和媒体查询完美地结合，形成平滑的布局变 化跳转效果。一般而言，media里的样式多以width、padding、margin、font-size、line-height这些为主。
g) 响应式web设计之液态图片：
要实现液态图片，只需加入如下代码：img{max-width:100%;}
web移动头部书写1
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>首页</title> <meta name="keywords" content="首页关键字" /> <meta name="description" content="首页描述" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Cache-Control" content="no-cache" /> <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=2.0" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <link rel="apple-touch-icon-precomposed" sizes="48×48" href="/images/48×48.png" /> <link rel="apple-touch-icon-precomposed" sizes="72×72" href="/images/72×72.png" /> <link rel="apple-touch-icon-precomposed" sizes="114×114" href="/images/114×114.png" /> </head>
1、首先我们来看看webkit内核中的一些私有的meta标签，这些meta标签在开发webapp时起到非常重要的作用
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
这个meta标签表示：强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览；
<meta content="yes” name=" apple-mobile-web-app-capable" />
meta标签是iphone设备中的safari私有meta标签，它表示：允许全屏模式浏览；
<meta content="black" name=" apple-mobile-web-app-status-bar-style" />
meta标签也是iphone的私有标签，它指定的iphone中safari顶端的状态条的样式；
<meta content="telephone=no" name="format-detection" />
meta标签表示：告诉设备忽略将页面中的数字识别为电话号码
其他注意问题
1.在项目开发过程中可以会遇到内容排列排列显示的布局，建议你放弃float，可以直接使用display:block;
2.请保证将每条数据都放在一个a标签中，为何这样做？因为在触控手机上，为提升用户体验，尽可能的保证用户的可点击区域较大。
3.学会使用webkit-box。
我们说过自适应布局模式，有些同学可能会问：如何在移动设备上做到完全自适应呢？很感谢webkit为display属性提供了一个 "webkit-box" 的值，它可以帮助前端工程师做到盒子模型灵活控制。
4、如何去除Android平台中对邮箱地址的识别 看过iOS webapp API的同学都知道iOS提供了一个meta标签:用于禁用iOS对页面中电话号码的自动识别。在iOS中是不自动识别邮件地址的，但在Android平 台，它会自动检测邮件地址，当用户touch到这个邮件地址时，Android会弹出一个框提示用户发送邮件，如果你不想Android自动识别页面中的 邮件地址，你不妨加上这样一句meta标签在head中
<meta content="email=no" name="format-detection" />
5、如何去除iOS和Android中的输入URL的控件条 你的老板或者PD或者交互设计师可能会要求你：能否让我们的webapp更加像nativeapp，我不想让用户看见那个输入url的控件条？答案是可以做到的。我们可以利用一句简单的javascript代码来实现这个效果
setTimeout(scrollTo,0,0,0);
请注意，这句代码必须放在window.onload里才能够正常的工作，而且你的当前文档的内容高度必须是高于窗口的高度时，这句代码才能有效的执行。
6、如何禁止用户旋转设备 我曾经也想禁止用户旋转设备，也想实现像某些客户端那样：只能在肖像模式或景观模式下才能正常运行。但现在我可以很负责任的告诉你：别想了!在移动版的webkit中做不到！至少Apple webapp API已经说到了：我们为了让用户在safari中正常的浏览网页，我们必须保证用户的设备处于任何一个方位时，safari都能够正常的显示网页内容 （也就是自适应），所以我们禁止开发者阻止浏览器的orientationchange事件，看来苹果公司的出发点是正确的，苹果确实不是一般的苹果。iOS已经禁止开发者阻止orientationchange事件，那Android呢？对不起，我没有找到任何资料说Android禁止开发者阻止浏览器orientationchange事件，但是在Android平台，确实也是阻止不了的。
7、如何检测用户是通过主屏启动你的webapp
看过Apple webapp API的同学都知道iOS为safari提供了一个将当前页面添加主屏的功能，按下iphone\ipod\ipod touch底部工具中的小加号，或者ipad顶部左侧的小加号，就可以将当前的页面添加到设备的主屏，在设备的主屏会自动增加一个当前页面的启动图标，点 击该启动图标就可以快速、便捷的启动你的webapp。从主屏启动的webapp和浏览器访问你的webapp最大的区别是它清除了浏览器上方和下方的工具条，这样你的webapp就更加像是nativeapp了，还有一个区别是window对像中的navigator子对象的一个standalone属性。iOS中浏览器直 接访问站点时，navigator.standalone为false,从主屏启动webapp时，navigator.standalone为true， 我们可以通过navigator.standalone这个属性获知用户当前是否是从主屏访问我们的webapp的。在Android中从来没有添加到主 屏这回事！
6、如何关闭iOS中键盘自动大写 我们知道在iOS中，当虚拟键盘弹出时，默认情况下键盘是开启首字母大写的功能的，根据某些业务场景，可能我们需要关闭这个功能，移动版本webkit为input元素提供了autocapitalize属性，通过指定autocapitalize="off"来关闭键盘默认首字母大写。
********************分割线*************************
原文：http://www.cnblogs.com/www561cn/p/3875746.html
相关推荐
1. 移动Web优化：移动设备的硬件和网络环境与桌面电脑有所不同，因此移动Web开发需要特别关注页面加载速度、资源利用率和电池消耗。通过合理的HTML5标记结构、CSS3选择器优化、延迟加载策略以及对移动设备特性的适配...
在移动互联Web前端开发项目1和2中，我们聚焦于为移动电子商务构建高效、响应式且用户友好的界面。Web前端开发是构建互联网应用程序的重要组成部分，它涉及到网站的视觉呈现、交互性和用户体验。在这个领域，...
标准的核心内容，来源于社会对Web前端开发职业活动质量的要求,是衡量从业者(包括正在接受教育与培训的准从业者)胜任Web前端开发工作的基本尺度和规范,能够反映当下时期内Web前端开发职业教育的人才培养质量规格。
20前端开发基础视频-head标签和页面编码title标签使用.avi 21前端开发基础视频-页面编码补充1.avi 21前端开发基础视频-页面编码补充2.avi 21端开发基础视频-页面编码补充.avi 22前端开发基础视频-link标签的...
《Web前端开发技术储久良第三版答案》涵盖了前端开发领域的关键知识点，主要针对储久良教授编著的教材第三版中的习题和实验提供了详尽的解答。这本书旨在帮助学习者深入理解Web前端开发的核心概念和技术，通过解决...
移动Web技术随着设备和网络的优化迭代,包含更多、更复杂的应用功能,不再是大家所认识的简单交互、单纯展示的页面而已。如今移动Web开发者早期基于DOM的开发方式,逐渐向 MVC/MVVM类库框架迁移,比较有代表性的框架有 ...
在“移动互联Web前端项目3_using566_web前端_”这个主题中，我们主要探讨的是针对移动电子商务的Web前端开发技术。Web前端是构建互联网应用程序的重要组成部分，它负责用户与应用之间的交互，特别是在移动设备上，...
5. 高级设计模式和框架：现代前端开发中，设计模式和框架的使用变得越来越重要，如 MVC、AngularJS 等。这些设计模式和框架可以帮助前端开发者更好地组织代码，提高开发效率。 6. 自动化工作流：自动化工作流的使用...
《1+X WEB前端开发初级教案》是一个针对初学者的教育资源，主要涵盖了Web前端开发的基础知识和技能。在Web前端开发领域，这是学习者踏入这个充满创新和技术挑战世界的入门教材。"1+X"通常指的是国家职业教育1+X证书...
【Web前端开发实训项目源代码】是一个以Bootstrap框架为基础的实训项目，主要目的是为了帮助学习者掌握Web前端开发的关键技术和实践经验。在这个项目中，开发者利用Bootstrap的灵活性和响应式设计特性，构建了一个...
在IT行业中，Web前端开发是构建互联网应用的重要组成部分，它主要负责用户与应用程序之间的交互界面。本综合实例将深入探讨“响应式页面”这一关键概念，这是现代网页设计的基石，确保网页能在不同设备和屏幕尺寸上...
### Web前端开发详细教程 #### 一、引言 随着互联网技术的发展，Web前端开发已成为一个重要的领域。它不仅涉及到网站的设计与实现，还涵盖了用户体验、交互设计等多个方面。本教程旨在为初学者提供全面而深入的...
### Web前端开发基础 #### 1. Web前端概述 Web前端开发是指通过使用HTML、CSS、JavaScript等技术实现网页或应用程序的界面设计与交互功能的过程。它是构建用户直接接触的网站部分的核心技术之一。随着互联网技术的...
移动前端开发是现代互联网技术的重要组成部分，特别是在智能手机和平板电脑普及的今天，移动Web开发技巧对于开发者来说至关重要。本文将围绕“移动前端开发收藏夹”和“移动Web开发技巧”这两个核心主题，深入探讨...
### HTML5及CSS3 Web前端开发技术习题答案解析 #### 1. HTML5与HTML4的主要区别及其解决的问题 HTML5与HTML4相比，在Web前端开发领域解决了多个关键问题，主要包括： - **浏览器间的兼容性问题**：早期不同浏览器...
"1+x 证书 Web 前端开发初级实操考试"是一个针对初学者设计的实践考核，旨在检验学习者在Web前端开发领域的基础技能和理解程度。这个考核可能包括HTML、CSS、JavaScript等核心技术的运用，以及对网页布局、响应式...
前端开发中，命名规范对于代码的可读性和可维护性至关重要。前端结构组织与文件命名规范要求同一项目中的代码组织结构清晰，同类型文件归类到相同的文件夹中，文件命名规则须统一并且要有意义。HTML命名规范要求HTML...
中级 web 前端开发工程师需要负责页面的数据渲染、业务逻辑开发，有能力归纳总结出组件，保持通用、扩展性。 八、具备前端性能优化和代码优化的实施 中级 web 前端开发工程师需要具备前端性能优化和代码优化的实施...
"Web前端开发职业技能等级证书标准(2022版)实用.pdf" 以下是从该文件中生成的相关知识点： 1. 职业技能概况： * 职业技能名称：Web 前端开发 * 职业技能定义：利用 HTML、CSS、JavaScript、网页开发框架等专业...
总之，HTML5移动Web开发是一个涉及广泛技术领域的专业领域，它需要开发者不仅要有扎实的前端开发基础，还需要不断学习新的技术和理念，以便能够为不断发展的移动设备市场提供高性能、高体验的Web应用。