移动平台前端开发总结
移动平台前端开发是指针对高端智能手机（如Iphone、Android）做站点适配也就是WebApp，并非是针对普通手机开发Wap2.0，所以在阅读本篇文章以前，你需要对webkit内核的浏览器有一定的了解，需要对HTML5和CSS3有一定的了解。
1、首先我们来看看webkit内核中的一些私有的meta标签，这些meta标签在开发webapp时起到非常重要的作用
(1)
(2)
(3)(4)
第一个meta标签表示：强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览；尤其要注意的是content里多个属性的设置一定要用分号+空格来隔开，如果不规范将不会起作用。
第二个meta标签是iphone设备中的safari私有meta标签，它表示：允许全屏模式浏览；第三个meta标签也是iphone的私有标签，它指定的iphone中safari顶端的状态条的样式；第四个meta标签表示：告诉设备忽略将页面中的数字识别为电话号码2、如何去除Android平台中对邮箱地址的识别
看过iOSwebappAPI的同学都知道iOS提供了一个meta标签:用于禁用iOS对页面中电话号码的自动识别。在iOS中是不自动识别邮件地址的，但在Android平台，它会自动检测邮件地址，当用户touch到这个邮件地址时，Android会弹出一个框提示用户发送邮件，如果你不想Android自动识别页面中的邮件地址，你不妨加上这样一句meta标签在head中
3、如何去除iOS和Android中的输入URL的控件条
你的老板或者PD或者交互设计师可能会要求你：能否让我们的webapp更加像nativeapp，我不想让用户看见那个输入url的控件条？
答案是可以做到的。我们可以利用一句简单的javascript代码来实现这个效果
setTimeout(scrollTo,0,0,0);
请注意，这句代码必须放在window.onload里才能够正常的工作，而且你的当前文档的内容高度必须是高于窗口的高度时，这句代码才能有效的执行。4、如何禁止用户旋转设备
我曾经也想禁止用户旋转设备，也想实现像某些客户端那样：只能在肖像模式或景观模式下才能正常运行。但现在我可以很负责任的告诉你：别想了!在移动版的webkit中做不到！
至少ApplewebappAPI已经说到了：我们为了让用户在safari中正常的浏览网页，我们必须保证用户的设备处于任何一个方位时，safari都能够正常的显示网页内容（也就是自适应），所以我们禁止开发者阻止浏览器的orientationchange事件，看来苹果公司的出发点是正确的，苹果确实不是一般的苹果。iOS已经禁止开发者阻止orientationchange事件，那Android呢？对不起，我没有找到任何资料说Android禁止开发者阻止浏览器orientationchange事件，但是在Android平台，确实也是阻止不了的。5、如何检测用户是通过主屏启动你的webapp
看过ApplewebappAPI的同学都知道iOS为safari提供了一个将当前页面添加主屏的功能，按下iphone\\ipod\\ipodtouch底部工具中的小加号，或者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”来关闭键盘默认首字母大写。
扩展阅读：针对移动终端的Web App前端开发
手机移动应用|APP应用开发爱布斯APP制作平台
针对移动终端的WebApp前端开发
据201*年VisionMoblie开发者经济学报告显示，如果移动Web视作新的开发平台，那么它仅次于Android和iOS成为最受开发者青睐的第三大平台。特别是HTML5技术的飞速发展不断涌现的各种创新产品和工具，Facebook推出斯巴达项目、Adobe收购PhoneGap等重大动作，无不吸引众多开发者投入。
一个被业界广泛关注的问题是：“移动Web会否在不久的未来重现在PC端上最终成为主流的的发展趋势？”10月13日晚上，在CMDN移动开发者俱乐部第六期活动，当当网前端工程师柴春燕分享了他的思考和实践心得。演讲实录如下：
当当网Web前端工程师柴春燕
非常高兴今天晚上在这里跟大家分享移动终端使用HTML5技术做了一些实践。对于移动终端目前开发方式无非就两种，其中一种就是HTML5的解决方案。如果采用HTML5的话它的Fxs（音译）就在前端。移动互联网及其现状
前面刘铁锋讲的是把PC都包含进去，我讲的就是针对移动互联网，针对移动终端，常见像智能机、上网本、移动终端可以访问网络的设备，它的可以实现的一些方式。第二是在移动
移动互联网营销：广州网站建设：小草坝天麻：
手机移动应用|APP应用开发爱布斯APP制作平台
互联网MobileWebApp开发的时候可能会遇到的一些问题。还有HTML5适合MobileWebApp开发的特性。这是我开发MobileWebApp的心得跟大家分享。
之前互联网消费调查中心做了一个研究，手机上网在生活中重要性比例，他所占据份额会越来越高。另外这个统计调查在201*年底，一半美国人都会使用智能手机，201*年预计移动互联网用户超过10亿，2020年HTML5这种方案已经确定了。截止到201*年6月底，中国的三大运营商智能机份额已经超过8千万。这个趋势随着3G互联网方面会越来越大。移动互联网是指什么？官方解释就是将移动通信和互联网两者结合，用户借助移动终端包括手机、平板、PDA、上网本等，通过网络访问互联网。大家如果做过移动开发的话，最开始如果想用手机访问互联网的话，从几个阶段过渡过来，一个是WML方式，Web1.0，还有Web2.0。
移动互联网使用的关键技术
第一是Web2.0技术。在移动互联网的时候，MobileWebApp的时候以Web2.0为基础，利用集体智慧，数据驱动，带来较丰富的体验。iOS操作系统诞生，从本质来说其实带来颠覆性是用户体验上的一些更新。后面我会讲到为什么移动设备有很多局限性，包括大家在做移动开发的时候都会遇到兼容性的问题。
第二是云计算像超大规模、高可扩展性、高可靠性和相对廉价。移动互联网开发面临问题
第一个是设备。你拿到手机终端，相比PC端浏览器运算处理速度都有很大差距。内存小，电池续航能力差，屏幕不统一。针对哪种终端设备做适配，比你做PC端前端开发所遇到的困难还要大。
第二个是开发，多种不同手机操作系统，每一种操作体验不一样，相应应用开发环境也是不同。像iPhone的IOS操作系统，是使用WebKet（音译）为核心。两种版本兼容Webket，具体对HTML5支持力度是不一样的。大家可以看到这个官方站点就可以看到，能够支持多点触控。像WindowsPhone是采用IE为内核。三者操作起来也不一样，iPhone硬件只有一个Hom键，Android是软硬件结合一个实体，返回可以通过硬件操作。如果你把所有操作、用户体验都放到一个里面看的话，他是有差异的。这是我们做WebApp的时候都必须要考虑的一些问题。
第三是网络，这是大家无法回避的一个地方。为什么在HTML5出现之后大家会这么狂热，会觉得他是一个趋势。目前虽然中国现在有3G，他的覆盖面并不是达到处处都可以拥有3G网络，它的流量费用也并不是人人都可以承担的地步。像网络稳定性上面都还是有一些问题的。比如你在坐地铁的时候，可能到朝阳门的时候还有信号，走到建国门信号就没有
移动互联网营销：广州网站建设：小草坝天麻：
手机移动应用|APP应用开发爱布斯APP制作平台
了。这种情况下用原声还好解决，如果使用网页形式访问的话，如果没有做到APP方式，基本处于假死或者是掉线状态，无法进行第二次访问，这对用户体验是很大的问题。HTML5适合MobileWebApp开发的特性
这些是一个不完全包括的HTML5的集合，这里面我只是罗列出来，我这里说明一下，我觉得HTML5本身也是草案，我也是在一个学习过程中。
第一是语义化。你做MobileWebApp，他本质还是希望以后把PC端搜索引擎，都可以用到移动端。当用户通过手机搜索某些东西的时候，可以直接定位到MobileWebApp这种站点，更好的用户体验。百度框计算，现在都有这种功能。
第二是新的表单功能。之前做表单功能的时候可能常见的像Canvas，像移动端验证肯定是必须的，像这个键盘是不容忽视的问题，你的手指相比你的移动设备还是很大的。这个情况下如何更好带来用户输入上的体验，支持浏览器都有对HTML5的一些帮助。我们有对于E-Mail的，软键盘都有调用方式，邮件的话键盘就增加一个@符号。还有Canvas像一些对图片旋转是可以原声支持，像手机处理性能会越来越高，手机有这样的提升。做这种技术储备，后面都有一些长足的用处。
第四讲到视频和音频，嵌入音频和视频和文字排版布局的时候，相当麻烦，你要把所有音频视频文本作为独立资源去集合起来，如果采用HTML5的方式的话就非常简单。他和你普通
移动互联网营销：广州网站建设：小草坝天麻：
手机移动应用|APP应用开发爱布斯APP制作平台
做页面没有辅助差别，可以辅助与CSS，包括CSS3这种方式，可以轻松实现这种布局方式。WebWorker是一个草案，只是一个工具。具体项目里面没有用到。剩下地理位置信息，是HTML5原声支持，为什么说像HTML5使用一些场景都会像导航类、地图类都会用到地理位置信息。传统的话谷歌地图，大家获得地图信息，不是所有地图软件包获取下来，可以实施地理位置定位。移动区别PC端，因为他就是移动。可以扩展出很多，在实际项目应用中就会遇到这样的，我们所有的商品都会有区域购买，他在什么地区可以购买，什么地区他是没有配货。这种情况下如果用地理位置信息他就非常方便。因为我可以检测到如果他购买的用户是来自于本地的话，我可以首先获取它的地理位置，告诉他联网请求后台服务，看他是否有货。他其实就是利用地理位置信息一个功能。剩下这个就是本地存储和离线功能，这是我们做WebApp的一个源动力。像这个功能才能够支持我们去更好带来这种用户体验，我们可以把一些资源缓存到本地。可以把用户状态缓存到本地，这个地方也是需要注意的一个地方，就是安全性问题。你像用户比较核心的一些信心是不建议保存到本地的。但是有一些信心可以用到这些功能，比如在项目中可能会用到搜索，原来大家可能会常用这种搜索推荐。我如果搜索一次，下次还是搜索这个怎么办，我可以使用本地搜索功能，我直接把他放到本地，下次直接读取历史记录，这个跟原生没有差别。另外就是离线功能，金融时报FT这个站点，他其实都用了离线功能，把所需要资源优先获取到本地，然后这样子，当用户在没有网络的情况下，我可以把有一些资源呈现给用户。然后又可以再去请求服务器端，同时像这种离线功能还有一些Gmail还有新浪微博都有这些应用在里面。我发帖子也是一样，把先在发帖时候的信息先缓存到本地，然后再把他发送到服务器端。WebSocket，虽然现在也是草案，目前各浏览器支持力度还是比较好的。这在实际项目中可能会用到，我觉得就是像这些新特性，像HTML5提供了相当相当多的全新API，是原来没有尝试过的。有些地方像OA这种，如果采用传统这种方式，像这种HTTP这种是无状态的，这种情况下怎么办，可以通过WebSocket方式。这是从网上找到，如果你去开发，他有一些底层框架在上面的。
HTML5在开发移动应用方面有哪些优势呢？
第一是跨平台。如果公司比较小，你如果要去开发一套针对iPhone版本，再针对一套Android版本，Android目前有高中低三种版本，每一种版本去做适配有四个版本，两套代码。你开发需要两套成本，然后运营。我们通过MobileWebApp的方式，开发成本低于你这种本地应用，在不同操作系统上可以带来近乎一致这种用户体验。因为他其实还是一种Web方式去展现。
第二是他基于Web技术。它有成熟社区，Web开发人员很容易迁移到像移动互联网开发上面去。
第三个是易用部署。这是后面我在开发中发现他其实真的有很大差异的地方。我们用传统方式去开发APP这种应用的时候，我要做一个广告位，像原生这种方式，我更新一个版本，
移动互联网营销：广州网站建设：小草坝天麻：
手机移动应用|APP应用开发爱布斯APP制作平台
通过他的用户去下载。更新一个版本的话，你必须把每个系统都做一次更新升级，这个带来部署和维护上面一些成本。采用这种MobileWebApp方式，可以实现持续更新。HTML5开发移动应用的注意事项
第一智能手机市场占有率。针对对比一下这种HTML5开发移动应用注意事项，智能手机市场占有率没有达到人手一部，虽然智能机在8000万，但是中国13亿人，没有做到人人一部。我们公司做的统计，移动端，Symbian操作系统还是占45%份额以上，访问量还是比较大的。
第二是移动设备浏览器对HTML5的支持并没有像桌面版本那么全面。每个移动浏览器，目前市面上见到的IE的Mobile版本，包括目前出来的QQ浏览器、遨游、海豚浏览器，各个移动设备浏览器对HTML5支持都是不一样的。像HTML5开发WebApp方式，最成功案例永远是出现在iPhone上面，出现在iOS操作系统上面，会做他的兼容和适配。第三是不同浏览器间的兼容性问题。移动端的浏览器不比PC端他要差一些。适合采用MobileWebApp方式的场景
我自己总结一下适合采用MobileWebApp方式的场景，所有都是我在自己不断学习过程的一个总结，并不是一个权威的观点，只是拿出来和大家分享。我觉得MobileWebApp基本上都是基于信息流的，什么叫做信息流的？这种应用都是由后台服务器推送过来。打个比方，我们看到新闻类，iOS、Android支持两种，一个是JSL，一个是HTML。有两条产品线做iPhone和Android产品线，采用MobileWebApp的方式，我可以完全做到直接去存储数据库就可以。我做一套API提供给客户端。
第一个是微博，另外是社交新闻类，地图和导航类，他采用就是按需下载，能够带来客户更多流量上的节省和体验上的提升。基于这个基础之上可以做更多的分享，像切客这种功能。一个是商品列表、一个是商品详情，点进去之后就是购物流程。信息展示类，他是非常适合用MobileWebApp的方式做的。
后面我想展示一些成功的站点，比如说谷歌Plass（音），还爱百度小说都是采用MobileWebApp方式做的。还有像淘宝。像列表展示，其实内部嵌这个都是Webwell（音），他们做HTML5然后去实现的。这个图登录和注册功能，完全可以使用HTML5表单功能，去做记住密码，你去校验用户输入。还有第三方框架，有学习和参考的地方，第一是iUI，还有JQtouch，
MobileWebApp开发心得
移动互联网营销：广州网站建设：小草坝天麻：
手机移动应用|APP应用开发爱布斯APP制作平台
第一要创新。HTML5提供了很多原来你不曾想象的一些功能点，你可以去参考iPhone和IOS操作体验。你去看像这种HTML5官方站点提供Demo（音），你想这些功能可能会用到什么地方。你可以去判断这个商品是否是区域购买，你针对具体应用场景，完全可以做到你的实际项目里边。
第二是安全性。并不是这个技术一定要用到这个项目里边去，你要考虑是这个场景，我做的Android应用的时候其实只是考虑到为了实现这样的功能，比如说记住密码。我们可以由其他替代方案，并不是一定要采用为了技术而技术，我们用户需求是第一位的。
第三是规范。HTML5本身是草案，每个公司做MobileWebApp的时候，都没有一套完整的体系，不像之前做开发的时候前端会给你开发，像HTML5跟CSS3结合，做MobileWebApp这种，WebApp的方式的话更多可能会在交互，还有就是样式，配置等等，你要精确到细节，比你原来做前端，具体到细节更加要规范一些。
移动互联网营销：广州网站建设：小草坝天麻：
友情提示：本文中关于《移动平台前端开发总结》给出的范例仅供您参考拓展思维使用，移动平台前端开发总结：该篇文章建议您自主创作。
来源：网络整理 免责声明：本文仅限学习分享，如产生版权问题，请联系我们及时删除。
公文素材库友情提示：本网站所有内容为共享上传提供，不涉及任何商业利益，本站对此不承担任何保证责任！
Copyright © www.bsmz.net Corporation, All Rights Reserved 共享时代 共享你我他 版权所有