原创力文档- 1、原创力文档（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。。
- 2、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击 这里二次下载。
- 3、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。
- 4、该文档为VIP文档，如果想要下载，成为VIP会员后，下载免费。
- 5、成为VIP后，下载本文档将扣除1次下载权益。下载后，不支持退款、换文档。如有疑问请联系我们。
- 6、成为VIP后，您将拥有八大权益，权益包括：VIP文档下载权益、阅读免打扰、文档格式转换、高级专利检索、专属身份标志、高级客服、多端互通、版权登记。
- 7、VIP文档为合作方或网友上传，每下载1次， 网站将根据用户上传文档的质量评分、类型等，对文档贡献者给予高额补贴、流量扶持。如果你也想贡献VIP文档。上传文档
WebApp开发技巧总结
一、META/LINK相关
1、百度禁止转码
通过百度手机打开网页时，百度可能会对你的网页进行转码，往你页面贴上它的广告，
非常之恶心。不过我们可以通过这个meta标签来禁止它：
1.br
相关链接：SiteApp转码声明
2、添加到主屏后的标题（iOS）
1.br
3、启用WebApp全屏模式（iOS）
当网站添加到主屏幕后再点击进行启动时，可隐藏地址栏（从浏览器跳转或输入链接进
入并没有此效果）
1.brbr
PS：然而，经本人用5S测试，设置apple-touch-fullscreen并没有什么卵用，希望
了解者能在底部评论告知
4、设置状态栏的背景颜色（iOS）
设置状态栏的背景颜色，只有在apple-mobile-web-app-capablecontent=yes时
生效
1.br
content参数：
default：状态栏背景是白色。
black：状态栏背景是黑色。
black-translucent：状态栏背景是半透明。如果设置为default或black,网页内
容从状态栏底部开始。如果设置为black-translucent,网页内容充满整个屏幕，顶部会
被状态栏遮挡。
6、移动端手机号码识别（iOS）
在iOSSafari（其他浏览器和Android均不会）上会对那些看起来像是电话号码的数
字处理为电话链接，比如：
7位数字，形如：1234567
带括号及加号的数字，形如：(+86)123456789
双连接线的数字，形如：00-00-00111
11位数字，形如
可能还有其他类型的数字也会被识别。我们可以通过如下的meta来关闭电话号码的自
动识别：
1.br
但某些时候，你关闭电话自动识别后，又希望某些电话号码长按时能够链接到iPhone
的拨号功能和短信功能，你可以使用下面的方法实现：
开启电话功能：
1.123456
开启短信功能：
1.123456
7、移动端邮箱识别（Android）
与电话号码的识别一样，在安卓上会对符合邮箱格式的字符串进行识别，我们可以通过
如下的meta来管别邮箱的自动识别：
1.br
同样地，我们也可以通过标签属性来开启长按邮箱地址弹出邮件发送的功能：
1.amailto:dooyoe@dooyoe@/amailto:dooyoe@gmail.co
m
8、添加智能App广告条SmartAppBanner（iOS6+、Safari）
1.br
9、iOSWebapp启动动画
由于iPad的启动画面是不包括状态栏区域的。所以启动图片需要减去状态栏区域所对
应的方向上的20px大小，相应地在retina设备上要减去40px的大小
1.br
（landscape：横屏|portrait：竖屏）
10、添加到主屏后的APP图标
指定WebApp添加到主屏后的图标路径，有两种略微不同的方式：
1.apple-touch-icon：在IOS6及以下的版本会自动为图标添加一层高光效果（IOS7开始已使
用扁平化的设计风格）
2.apple-touch-icon-precomposed：使用“设计原图图标”
效果：
图标尺寸：
可通过指定size属性来为不同的设备提供不同的图标（但通常来说，我们只需提供一
个114x114pixels大小的图标即可）
官方说明如下:
Createdifferentsizesofyourappiconfordifferentdevices.I
文档评论（0）