webkit 开发总结
/（天翼空间开发者社区）
假设你是一名前端er,又想在挪动设备上开发出本身的利用，那怎么实现呢？幸亏，webkit内核的阅读器能搀扶帮助我们完成那一切。接触 webkit webApp的开发已经有一段时间了，现把一些身手分享给各人 ：
自Iphone和Android那两个牛逼的手机操做系统发布以来，在互联网界从此就多了一个新的名词-WebApp(意为基于WEB形式的利用法式，运行在高端的挪动末端设备)。
开发者们都晓得在高端智妙手机系统中有两种利用法式：一种是基于当地（操做系统）运行的APP；一种是基于高端机的阅读器运行的WebApp，本文将次要讲解后者。
WebApp与Native App有何区别呢？
Native App：
1、开发成本十分大。
一般利用的开发语言为JAVA、C++、Objective-C。
2、更新体验较差、同时也比力费事
每一次发布新的版本，都需要做版本打包，且需要用户手动更新（有些利用法式即便不需要用户手动更新，但是也需要有一个恶心的提醒）。
3、十分酷
因为native app能够挪用IOS中的UI控件以UI办法，它能够实现WebApp无法实现的一些十分酷的交互效果
4、Native app是被Apple承认的
Native app能够被Apple承认为一款可相信的独立软件，能够放在Apple Stroe出卖，但是Web app却不可。
Web App：
1、开发成本较低
利用web开发手艺就能够轻松的完成web app的开发
2、晋级较简单
晋级不需要通知用户，在办事端更新文件即可，用户完全没有觉得
3、庇护比力轻松
和一般的web一样，庇护比力简单，它其实就是一个站点
Webapp说白了就是一个针对Iphone、Android优化后的web站点，它利用的手艺无非就是HTML或HTML5、CSS3、JavaScript，办事端手艺JAVA、PHP、ASP。
当然，因为那些高端智妙手机（Iphone、Android）的内置阅读器都是基于webkit内核的，所以在开发WEBAPP时，大都都是利用 HTML5和CSS3手艺做UI规划。当利用HTML5和CSS3l做UI时，若仍是遵照着一般web开发中利用HTML4和CSS2那样的开发体例的 话，那也就失往了WEBAPP的素质意义了，且有些效果也无法实现的，所以在此又回到了我们的主题–webapp的规划体例和手艺。
在此所说的挪动平台前端开发是指针对高端智妙手机（如Iphone、Android）做站点适配也就是WebApp，并不是是针对通俗手机开发 Wap 2.0，所以在阅读本篇文章以前，你需要对webkit内核的阅读器有必然的领会，你需要对HTML5和CSS3有必然的领会。假设你已经对此有 所领会，那如今就起头往下阅读吧……
1、起首我们来看看webkit内核中的一些私有的meta标签，那些meta标签在开发webapp时起到十分重要的感化
1
2
3
4
第一个meta标签表达：强逼让文档的宽度与设备的宽度连结1:1，而且文档更大的宽度比例是1.0，且不容许用户点击屏幕放大阅读；
第二个meta标签是iphone设备中的safari私有meta标签，它表达：容许全屏形式阅读；
第三个meta标签也是iphone的私有标签，它指定的iphone中safari顶端的形态条的款式；
第四个meta标签表达：告诉设备漠视将页面中的数字识别为德律风号码
2、HTML5标签的利用
在起头编写webapp时，哥定见前端工程师利用HTML5，而舍弃HTML4，因为HTML5能够实现一些HTML4中无法实现的丰富的WEB利用法式 的体验，能够削减开发者良多的工做量，当然了你决定利用HTML5前，必然要对此十分熟悉，要晓得HTML5的新标签的感化。好比定义一块内容或文章区域 可利用section标签，定义导航条或选项卡能够间接利用nav标签等等。
3、舍弃CSS float属性
在项目开发过程中能够会碰着内容摆列摆列展现的规划(见下图)，假设你碰见如许的视觉稿，哥定见你舍弃float，能够间接利用display:block;
4、操纵CSS3边框布景属性
那个按钮有圆角效果，有内发光效果还有高光效果，如许的按钮利用CSS3写是无法写出来的，当然圆角能够利用CSS3来写，但高光和内发光却无法利用 CSS3编写，那个时候你无妨利用-webkit-border-image来定义那个按钮的款式。-webkit-border-image就个很冗杂 的款式属性。
5、块级化a标签
请包管将每条数据都放在一个a标签中，为何如许做？因为在触控手机上，为提拔用户体验，尽可能的包管用户的可点击区域较大。
6、自适应规划形式
在编写CSS时，我不料见前端工程师把容器（不论是外层容器仍是内层）的宽度定死。为到达适配各类手持设备，我定见前端工程师利用自适应规划形式（付出宝 摘用了自适应规划形式），因为如许做能够让你的页面在ipad、itouch、ipod、iphone、android、web safarik、 chrome都可以一般的展现，你无需再次考虑设备的辨认率。
7、学会利用webkit-box
上一节，我们说过自适应规划形式，有些同窗可能会问：若何在挪动设备上做到完全自适应呢？很感激webkit为display属性供给了一个webkit-box的值，它能够搀扶帮助前端工程师做到盒子模子乖巧掌握。
8、若何往除Android平台中对邮箱地址的识别
看过iOS webapp API的同窗都晓得iOS供给了一个meta标签:用于禁用iOS对页面中德律风号码的主动识别。在iOS中是不主动识别邮件地 址的，但在Android平台，它会主动检测邮件地址，当用户touch到那个邮件地址时，Android会弹出一个框提醒用户发送邮件，假设你不想 Android主动识别页面中的邮件地址，你无妨加上如许一句meta标签在head中 1
9、若何往除iOS和Android中的输进URL的控件条
你的老板或者PD或者交互设想师可能会要求你：能否让我们的webapp愈加像nativeapp，我不想让用户看见阿谁输进url的控件条？
谜底是能够做到的。我们能够操纵一句简单的javascript代码来实现那个效果
1 setTimeout(scrollTo,0,0,0); 或者
2.addEventListener('load', function(){ setTimeout(function(){ window.scrollTo(0, 1); }, 100); });
请重视，那句代码必需放在window.onload里才气够一般的工做，并且你的当前文档的内容高度必需是高于窗口的高度时，那句代码才气有效的施行。
10、若何制止用户扭转设备
我曾经也想制止用户扭转设备，也想实现像某些客户端那样：只能在肖像形式或景看形式下才气一般运行。但如今我能够很负责任的告诉你：别想了!在挪动版的webkit中做不到！
至少Apple webapp API已经说到了：我们为了让用户在safari中一般的阅读网页，我们必需包管用户的设备处于任何一个方位 时，safari都可以一般的展现网页内容（也就是自适应），所以我们制止开发者阻遏阅读器的orientationchange事务，看来苹果公司的出 发点是准确的，苹果确实不是一般的苹果。
iOS已经制止开发者阻遏orientationchange事务，那Android呢？对不起，我没有找到任何材料说Android制止开发者阻遏阅读器orientationchange事务，但是在Android平台，确实也是阻遏不了的。
11、若何检测用户是通过主屏启动你的webapp
看过Apple webapp API的同窗都晓得iOS为safari供给了一个将当前页面添加主屏的功用，按下 iphoneipodipod touch底部东西中的小加号，或者ipad顶部左侧的小加号，就能够将当前的页面添加到设备的主屏，在设备的主屏会主动 增加一个当前页面的启动图标，点击该启动图标就能够快速、便当的启动你的webapp。从主屏启动的webapp和阅读器拜候你的webapp更大的区别 是它肃清了阅读器上方和下方的东西条，如许你的webapp就愈加像是nativeapp了，还有一个区别是window对像中的navigator子对 象的一个standalone属性。iOS中阅读器间接拜候站点时，navigator.standalone为false,从主屏启动webapp 时，navigator.standalone为true， 我们能够通过navigator.standalone那个属性获知用户当前能否是从主屏访 问我们的webapp的。在Android中历来没有添加到主屏那回事！
12、若何封闭iOS中键盘主动大写
我们晓得在iOS中，当虚拟键盘弹出时，默认情状下键盘是开启首字母大写的功用的，根据某些营业场景，可能我们需要封闭那个功用，挪动版本webkit为 input元素供给了autocapitalize属性，通过指定autocapitalize="off"来封闭键盘默认首字母大写。
13、iOS中若何彻底制止用户在新窗口翻开页面
有时我们可能需要制止用户在新窗口翻开页面，我们能够利用a标签的target="_self"来指定用户在新窗口翻开，或者target属性连结空，但 是你会发现iOS的用户在那个链接的上方长按3秒钟后，iOS会弹出一个列表按钮，用户通过那些按钮仍然能够在新窗口翻开页面，如许的话，开发者指定的 target属性就失效了，但是能够通过指定当前元素的-webkit-touch-callout款式属性为none来制止iOS弹出那些按钮。那个技 巧仅适用iOS关于Android平台则无效。
14、iOS中若何制止用户保留图片＼复造图片
我们在第13条身手中提到元素的-webkit-touch-callout属性，同样为一个img标签指定-webkit-touch-callout为none也会制止设备弹出列表按钮，如许用户就无法保留＼复造你的图片了。
15、iOS中若何制止用户选中文字
我们通过指定文字标签的-webkit-user-select属性为none即可以制止iOS用户选中文字。
16、iOS中若何获取滚动条的值
桌面阅读器中想要获取滚动条的值是通过document.scrollTop和document.scrollLeft得到的，但在iOS中你会发现那两 个属性是不决义的，为什么呢？因为在iOS中没有滚动条的概念，在Android中通过那两个属性能够一般获取到滚动条的值，那么在iOS中我们该若何获 取滚动条的值呢？
通过window.scrollY和window.scrollX我们能够得到当前窗口的y轴和x轴滚动条的值。
17、若何处理盒子边框溢出
当你指定了一个块级元素时，而且为其定义了边框，设置了其宽度为100％。在挪动设备开发过程中我们凡是会对文本框定义为宽度100％，将其定义为块级元 素以实现全屏自适应的款式，但此时你会发现，该元素的边框(摆布)各1个像素会溢了文档，招致呈现横向滚动条，为处理那一问题，我们能够为其添加一个特殊 的款式-webkit-box-sizing:border-box;用来指定该盒子的大小包罗边框的宽度。
18、若何处理Android 2.0以下平台中圆角的问题
假设各人够细心的话，在做wap站点开发时，各人应该会发现android 2.0以下的平台中问题特殊的多，好比说边框圆角那个问题吧。
在对一个元素定义圆角时，为完全兼容android 2.0以下的平台，我们必需要根据以下身手来定义边框圆角：
1＼-webkit那个前缀必需要加上（在iOS中，你能够不加，但android中必然要加）；
2＼假设对针对边框做款式定义，好比border:1px solid #000;那么-webkit-border-radius那属性必需要呈现在border属性后。
3＼假设我们有如许的视觉元素，左上角和右上角是圆角时，我们必需要先定义全局的(4个角的圆角值)-webkit-border- radius:5px;然后再依次的笼盖左下角和右下角，-webkit-border-bottom-left-radius:0;-webkit- border-bottom-right-border:0;不然在android 2.0以下的平台中将全数展现曲角，还有记住！-webkit那个前 缀必然要加上！
19、若何处理android平台中页面无法自适应
固然你的html和css都是完全自适应的，但有一天假设你发现你的页面在android中展现的并非自适应的时候，起首请你确认你的head标签中能否包罗以下meta标签：
1
假设有的话，那请你再认真的看清晰有没有那个属性的值width=device-width，假设没有请立即加上吧！
20、若何处理iOS 4.3版本中safari对页面中5位数字的主动识别和主动添加款式
新的iOS系统也就是4.3版本，晋级后对safari形成了一个bug：即便你添加了如下的meta标签，safari仍然会对页面中的5位持续的数字停止主动识别，而且将其从头衬着款式，也就是说你的css对该标签是无效的。
1
我们能够用一个比力龌龊的办法来处理。好比说付出宝wap站点中展现金额的标签，我们都做了如下改写：
1 95009.00元
21、阻遏扭转屏幕时主动调整字体大小
html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {-webkit-text-size-adjust:none;}
22、侦测iPhone/iPod
开发特定设备的挪动网站，起首要做的就是设备侦测了。下面是利用Javascript侦测iPhone/iPod的UA，然后转向到专属的URL
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) { if (document.cookie.indexOf("iphone_redirect=false") == -1) { window.location = ""; } }
平台简介
天翼空间是由面向用户的利用商城和面向开发者的利用工场（开发者社区）构成。
天翼空间.利用工场是办事于天翼空间的开发者社区，为天翼空间的开发者办事。在天翼空间营业全流程中发掘聚合包罗手机软件开发者、最末用户、和API利用开发者等角色的原始需求，并根据原始需求逐渐将天翼空间本身包罗数据、客服、用户等一系列资本开放。并聚合一批API开发者将原始开放接口开发成成熟可用的利用，最末使手机利用开发者能愈加高效的通过天翼空间平台获取更多的最末用户。
通过成立开发者社区全流程撑持平台旨在处理开发者在利用天翼空间时包罗客服，开发，测试，上架，开店等全流程中的利用问题，并通过论坛等交互式版块成立升引户的交互平台，最末到达进步用户称心度，进步开发者效率，为开发者办事的大旨。
天翼空间才能开放特征
1、开放接口丰富
开放包罗利用商铺数据、电信级通信和基于云计算的才能开放等多种多样的办事和API接口，为开发者供给多种多样的办事和才能。
2、挪用次数多
丰富的API+开发者无限的创意=挪用频次高，开放平台挪用次数已到达均匀每日300万次。
3、赚钱体例多
才能开放平台旨在为开发者打造一个需乞降实现的桥梁，供给清晰且多样的盈利形式，与协做伙伴配合生长，协做共赢。
4、协做形式开放
以宽大、自在的立场、不竭的摸索新协做形式，不限语言、不限平台，驱逐广阔的互联网开发者，普遍的聚合互联网开发者的力量。
开放平台营业
1、天翼空间API
中国电信天翼空间利用商铺将以天翼3G挪动互联网利用为核心，通过开放电信末端和收集才能，聚合强大的互联网才能，引领国内挪动互联网生活，带来3G无限超卓！
中国电信天翼空间在国内初创“前店后厂”营业形式，努力于摸索电信才能与互联网才能的合成，以天翼空间利用工场为窗口率先开放了运营商的根底才能接口，聚合起大量协做伙伴，构成了一多量表现互联网与电信网合效果能的才能接口，才能开放与合成那两大主体是天翼空间区别于业界其他利用商铺的核心合作力。
如：利用分类、利用详情、利用排行等
2、电信才能API
电信才能指电信开发的才能接口API接口的总称，也称电信API。
API是供给利用法式与开发人员基于某软件或硬件的以拜候一组例程的才能，而又无需拜候源码，或理解内 部工做机造的细节。只需要做简单的代码嵌进，就可以实现诸多冗杂的电信才能，好比短信群发、多方语音 、在线点歌等。
如：短信、语音、验证码、彩信等
3、云计算API
以中国电信云数据中心为支持，将可供给云计算主机治理平台、自办事门户治理平台、云数据治理中心以及云计算主机营业托管等相关的计算、存储及智能收集资本综合办事。吸引强大的开发者团队，构成引领国内挪动互联网生活的开发平台。
如：分词API、QQ机器人、云图像处置等
4、手机告白API
我们将供给开放的手机告白平台，有效的整合法式开发者、网站发布者、告白商、代办署理机构，打造多条理、全方位的手机告白API办事，妥帖利用法式并实现盈利；供给多种告白格局、优良的告白资本、将网站的流量循序改变为现金；为品牌和绩效告白商供给高效切确的处理计划，以此来吸引您的目标受寡并提拔销量。手机告白API以一流的平台，绝佳的赞扬案办法，立异的告白形式，实现多方的互利共赢。
如：Android法式SDK、Windows Mobile法式SDK、Brew法式SDK等