移动平台前端开发是指针对高端智能手机（如Iphone、Android）做站点适配也就是WebApp，并非是针对普通手机开发Wap 2.0，所以在阅读本篇文章以前，你需要对webkit内核的浏览器有一定的了解，需要对HTML5和CSS3有一定的了解。

1、首先我们来看看webkit内核中的一些私有的meta标签，这些meta标签在开发webapp时起到非常重要的作用

(1)<meta content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0" name="viewport" />

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

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

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

第一个meta标签表示：强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览；尤其要注意的是content里多个属性的设置一定要用分号+空格来隔开，如果不规范将不会起作用。

第二个meta标签是iphone设备中的safari私有meta标签，它表示：允许全屏模式浏览； 第三个meta标签也是iphone的私有标签，它指定的iphone中safari顶端的状态条的样式； 第四个meta标签表示：告诉设备忽略将页面中的数字识别为电话号码

2、如何去除Android平台中对邮箱地址的识别

看过iOS webapp API的同学都知道iOS提供了一个meta标签:用于禁用iOS对页面中电话号码的自动识别。在iOS中是不自动识别邮件地址的，但在Android平台，它会自动检测邮件地址，当用户touch到这个邮件地址时，Android会弹出一个框提示用户发送邮件，如果你不想Android自动识别页面中的邮件地址，你不妨加上这样一句meta标签在head中

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

3、如何去除iOS和Android中的输入URL的控件条

你的老板或者PD或者交互设计师可能会要求你：能否让我们的webapp更加像nativeapp，我不想让用户看见那个输入url的控件条？

答案是可以做到的。我们可以利用一句简单的javascript代码来实现这个效果

setTimeout(scrollTo,0,0,0);

请注意，这句代码必须放在window.onload里才能够正常的工作，而且你的当前文档的内容高度必须是高于窗口的高度时，这句代码才能有效的执行。

4、如何禁止用户旋转设备

我曾经也想禁止用户旋转设备，也想实现像某些客户端那样：只能在肖像模式或景观模式下才能正常运行。但现在我可以很负责任的告诉你：别想了!在移动版的webkit中做不到！

至少Apple webapp API已经说到了：我们为了让用户在safari中正常的浏览网页，我们必须保证用户的设备处于任何一个方位时，safari都能够正常的显示网页内容（也就是自适应），所以我们禁止开发者阻止浏览器的orientationchange事件，看来苹果公司的出发点是正确的，苹果确实不是一般的苹果。

iOS已经禁止开发者阻止orientationchange事件，那Android呢？对不起，我没有找到任何资料说Android禁止开发者阻止浏览器orientationchange事件，但是在Android平台，确实也是阻止不了的。

5、如何检测用户是通过主屏启动你的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”来关闭键盘默认首字母大写。

 

第二篇：网易财经前端开发总结

20xx-02-26 10:11 jaycie 博客园 我要评论(0) 字号：T | T

众所周知，http请求是要开销的，减少请求数可以提高网页加载速度。常用的方法，合并css，js以及 Image maps和css sprites等。笔者所在团队的做法是根据功能分开开发，然后通过内部系统对js，css进行分组合并。

AD： 20xx云计算架构师峰会超低价抢票中

作为门户网站的前端，有许多说不出的苦楚：有些代码虽然自己也看不下去，但还是不得不硬着头皮把页面给拼上去，比如跟其他频道公用的部分：因为是公用，js、css必须写在该部分，调用的js库(网易的很多频道头部都调用了两个大同小异的js库)等都身不由己。而且作为财经门户来说，页面分多屏是显然的、再者N多异步请求的数据(股票数据要及时更新)、画股票行情图等，对于前端的性能都是极大的考验。笔者用YSlow去测评了一下各大门户的财经频道，网易财经得了个C，而老东家新浪为F，腾讯、搜狐财经都D(测试时间为xx年x月x日)，这点还是挺庆幸的，哈....

好了，废话不多说，下面笔者就yahoo的14条军规来总结一下网易财经的前端开发工作：

1、Make Fewer HTTP Requests

众所周知，http请求是要开销的，减少请求数可以提高网页加载速度。常用的方法，合并css，js以及 Image maps和css sprites等。笔者所在团队的做法是根据功能分开开发，然后通过内部系统对js，css进行分组合并，这样对于浏览器来说是一个请求，但是开发时仍然能还原成多个，方便管理和重复引用。值得一提的是，网易内部的前端代码发布系统是很值得学习、借鉴的，对于fiddler调试和性能优化工作很是方便，这里不方便透露更多，有兴趣的单独聊，哈。而css sprites是指只用将页面上的背景图合并成一张，然后通过background-position来取背景。这里笔者并不提倡看到像图片的都用图片来处理，就该项目的

这些部分，都是通过css实现的。作为程序猿，新技术我们要及时掌握并加以运用，尤其是所谓的大公司，更要有这种气魄，不要因为某些极品的浏览器不兼容而放弃，庆幸的是，我们领导也很认同，哈哈～～

2、Use a Content Delivery Network (CDN 内容分发网络)

简单地讲，通过在现有的Internet中增加一层新的网络架构，将网站的内容发布到最接近用户的 cache服务器内，通过DNS负载均衡(可选根据时间或访问速度来决定访问哪台服务器资源，笔者刚到不久，没有深入去研究公司这部分底层)的技术，判断用户来源访问cache服务器取得所需的内容。这样可以有效减少数据在网络上传输的时间，提高速度。相信这个很多公司都有做，这里就不多说了。

3、Add an Expires Header

当然，这几部分内容后端帮我们完成了，3主要通过服务器端脚本设置Cache-Control和Expires完成；Gzip的思想就是把文件先在服务器端进行压缩，然后再传输。这个压缩率很高，基本上可以压缩到原来的1/4。笔者过去是phper，所以对这块也略知一二，对于前端攻城狮，我们还是有必要了解这块的内容。

5、Put Stylesheets at the Top

我们知道，css，Cascading Style Sheets (层叠样式表)。层叠即意味后面的css可以覆盖前面的css，级别高的css可以覆盖级别低的css。。ie，firefox等浏览器在css全部传输完全之前不会去渲染任何的东西。很多浏览器下，如IE，把样式表放在页面的底部的问题在于它禁止了网页内容的顺序显示。浏览器阻止显示以免重画页面元素，那用户只能看到空白页了。Firefox不会阻止显示，但这意味着当样式表下载后，有些页面元素可能需要重画，这导致闪烁问题。所以我们应该尽快让css加载完毕。实际上很多网站也是这么做的，当然有需要分屏显示的网站，为了让用户看到的首屏页面尽快显示，也可以分开放置，当然，这里要根据具体项目需求来讨论了。实际上笔者该项目也分了三个css文件，比如说是延时显示的广告，我们为了提高css加载速度，也独立出来了放在页面的底部。

6、Put Scripts at the Bottom

原因：首先，防止script脚本的执行阻塞页面的下载。在页面loading的过程中，当浏览器读到js执行语句的时候一定会把它全部解释完毕后在会接下来读下面的内容。浏览器这么做的逻辑是因为js随时可能执行 location.href或是其他可能完全中断此页面过程的函数，即如此，当然得等他执行完毕之后再加载咯。所以放在页面最后，可以有效减少页面可视元素的加载时间。其次，脚本引起的第二个问题是它阻塞并行下载数量。HTTP/1.1规范建议浏览器每个主机的并行下载数不超过2个（IE只能为2个，其他浏览器如ff等都是默认设置为2个，不过新出的ie8可以达6个）。因此如果您把图像文件分布到多台机器的话，您可以达到超过2个的并行下载。但是当脚本文件下载时，浏览器不会启动其他的并行下载。

7、Avoid CSS Expressions

尽量减少或者不使用css表达式，其实大部分可以用js实现。

8、Make JavaScript and CSS External

把css和js写在页面内容可以减少2次请求，但也增大了页面的大小。我们的网站已经对静态文件做了缓存，那也就没有2次多余的http请求了。

9、Reduce DNS Lookups

一次DNS的解析过程会消耗20-120毫秒的时间,在dns查询结束之前，浏览器不会下载该域名下的任何东西。所以减少dns查询的时间可以加快页面的加载速度。yahoo的建议一个页面所包含的域名数尽量控制在2-4个。这就需要对页面整体有一个很好的规划。目前我们这点做的不好，尤其是对于单纯靠广州收入的网站，很多广告投放系统拖累了我们，前端攻城狮们也无可奈何。

10、Minify JavaScript

压缩js和css的作用很显然，减少页面字节数。我们的前端部门，也有专门做后端的，为的是给前端开发提供工具，快速开发。Js虽然压缩了，降低了可读性，但是在调试的时候，工具可以将其复原，也就是调用本地的，这里做法应该赞一个，哈～～～

11、Avoid Redirects

重定向是需要消耗时间的。当然这只是一个例子，发生重定向的原因很多，比如跳转后面缺少 /等，有兴趣的可以去研究研究。

12、Remove Duplicate Scripts

14、Make Ajax Cacheable

这几个就不一一细讲了。

再有就是讲一下seo方面的问题。

1、标签语义化。提供给搜索引擎友好的提示，使得每个html标签都有它自己的含义和作用，使爬虫理解你写那个到底是个啥玩意。比如这里

我们的网易财经这几个文字，其实是没展示在页面中的，但是我们实际上代码是有写的，然后用样式使其隐藏起来。再如：

幻灯片的切换，可能这里的数字没有实际性的作用，而且也根本无需显示在页面中，很多时候我们就忽略不写了，写了反而还要使其文字不出现在页面中(比如设置text-indent值为负的)。其实不然，我觉得我们是有必要写上去的，这样别人(或机器)能方便的理解我们的真实意图了。这里不得不提的是，笔者该项目有些地方却故意跟标签语义化做对，比如这里：

没见过后面跟_ntesquote_这样的标签的吧，其实该页面存在大篇幅的这样的标签，为的是js统一获取该标签，一次性发送请求，获取异步数据，减少后端负荷。

2、权重控制。搜索引擎会根据我们设置的页面权重来划分页面重点，比如，h1~h6吧，其权重依次递减，一般h1是页面中重要的元素，这里可以设置为网站的logo或其说明文字，但不宜过多，太多了，搜索引擎就不知道该页面到底哪个是重要的了。

3、诸如其他的title、alt之类，笔者这里就不多说了。

最后贴上页面地址：http://money.163.com/ 欢迎志同道合之士拍砖、斧正，共同研究，一起进步。

原文链接：http://www.cnblogs.com/xiezhanggen/archive/20xx/02/24/163f2e.html

【编辑推荐】

1.

2.

3.

4.

5. 浅谈WEB产品信息架构 如何成为一名优秀的web前端工程师 前端开发工程师如何在20xx年里提升自己 Web前端性能优化进阶路 20xx年x月Web编程语言就业趋势