澳门太阳娱乐集团官网-太阳集团太阳娱乐登录

HTML5运动支付中的meta与link
分类:网页制作

HTML5在运动支付中的现状

2011/07/11 · HTML5 · HTML5

“咱们正在用HTML5编写制定我们下一套移动产品。”“是呀,那么些天很两人在玩着Appcelerator,笔者也在玩着。”“嗯,但那并非自家要说的这种HTML5产品。”

新近,作者有成都百货上千看似的交换对话,也许因为本人正在开采一套HTML5的应用吧。就像是2006年的“AJAX”,“HTML5”那一个术语以后还不曾被清晰地定义,在未规定这些新本事有哪些优势前,它就已经被各处套用,以至投入运转。

举个例子您在一间被热爱新本事的助理馆员掌握控制的厂商里任职,假诺您好运,那么漫画人物呆Bert先生或者特别愿意坐在你隔壁的小房间。

三种意见

当民众商议活动器材上的HTML5才能时,他们经常只会有几种不相同的视角。

从以为的角度来看,HTML5技能的渲染进度紧假使由浏览器、内嵌HTML5分析器的使用程序 (如PhoneGap)、帮衬书签打开药方式的应用程序又可能是活入手机产品(三星和平板电脑)举行的。这种能力的功利便是能重用现成的网页设计,Web开采人士也更易于上手,同不经常间产品有所更加高水平,更适用于多平台产品。也更便于调节和测验和勘误错误,而且,版本更新会更加快。此消彼长,优势是它的成效,假如您像PhoneGap同样接纳内嵌的架构,那么你会少非常多细节,劣点正是它的表现,这也是HTML5工夫面前碰着的最大难题。

从理性的角度来看,HTML5 技巧正是选取JavaScript引擎直接决定地点作用,改动移动道具上的浏览器组件。而HTML5运用上的显示难题越来越多是由HTML/CSS渲染技巧调整的,并不是由JavaScript深入分析生成的。假设利用准确,HTML5本领确实能够授予你多量新增加的展现作用。近来采用HTML5手艺的例子满含Appcelerator Titanium、Mobage/ngcore、Game Closure以至PhobosLabs。

Node.js工具包

以PhobosLabs的品类为例,当那个体系是使用WebKit的 JavaScriptCore组件落成,在设备端应用OpenGL渲染分界面,而在付出时利用HTML5的canvas组件的API开垦。那正是说,开垦人士能够在叁个对canvas有不错协助的桌面浏览器内支付和测量检验他的HTML5玩耍,并且当她将那么些娱乐放到移动设备的浏览器张开时,也会油然则生雷同非凡(以至更完美)的展现效果。这种用HTML5开支的功力跟使用Node.js工具包开拓的效劳很相像,使用Node.js时,只需启用JavaScript引擎,而你仅需把你要求选拔的Node.js组件增加到你的选用就能够。

Appcelerator的Titanium详述了HTML5本领的概念,给我们表现了二个整机的UI工具的抽象层,那使得它能够被应用到生成别的娱乐产品。意即三个HTML5用到开荒职员能够由此Appcelerator 的JavaScript UI库创造开关,而Appcelerator的内部逻辑会将那么些按键调换为iOS的原生界面按钮。大家得以经过JavaScript调控分界面上的原生按键。理论上,开拓职员能够无需写一句Objective-C代码。

HTML5技术有它的优势,当您依旧在采纳JavaScript编写代码时,你能够跟这多少个烦人的HTML/CSS布局逻辑和体裁注明说再见。你还能跟这些理想的调整工具说再见。但以此技术也可以有不行的一面,像HTML5的游戏API Mobage就存在有的小病魔,canvas组件能够在显示器相对小一点的分界面顺遂展现,但假若显示屏稍微变大学一年级点,就如Appcelerator的事例同样,在调解时,你还索要怀想分界面层额外的复杂性。在那有无数Appcelerator的负面斟酌,假令你能把地点的几点记在心里,那么这几个负面商量其实都足以被清楚。

标题还在浏览器

支出二个完完全全的HTML5手提式有线电话机使用的尤为重要难题正是运营速度过慢。而第二魔难点正是极度愚昧的工具束缚,多数零件或多或少在不一样浏览器都留存有的疏漏,如jQuery Mobile的导航组件、iOS的innerHTML组件的狐狸尾巴,所以你必要降低职能去幸免出现漏洞,又只怕您愿意花一些时刻去修补那个漏洞。

您能够本人做个实验,当你在三个iOS应用里仅使用一至四个分界面库时,再加上你和谐写的为数十分的少JavaScript代码,未有更加的多的JavaScript库,你会发觉那些HTML5行使运营得流畅而完整,但却没什么效果。PhoneGap的iOS项目仅须要1至2秒的时刻就能够在iPhone3GS上发表运维。那些谜底能够告知您,最基本的HTML5利用运转起来着实非常流利。所以,当您发觉你的HTML5施用的一些操作开支了10-15秒时间时,又或者花了15秒时间才加载完全体程序时,那都以部分JavaScript分界面库给拖累的。

两套有代表性的UI库

一个HTML5手提式有线电话机使用工程师必要的平时性独有那么两样东西:第同样正是原毕生台和网页分界面包车型大巴嫁接层;第二样正是手提式有线电话机UI库。

澳门太阳娱乐集团官网,PhoneGap近年已日渐成为暗许的嫁接层选拔,它同意HTML5运用通过JavaScript调用移动设备的照相机、访谈手机通信录和读写文件。而最受应接的手提式有线电话机UI库就富含由jQuery Mobile和Sencha Touch。

jQuery Mobile是2018年才创造的八个连串,所以它是这一个新的,很料定,它也远远不够成熟。jQuery Mobile的导航栏组件就不行倒霉,翻页时一览明白比原生的翻页功能要慢,假令你不刷新浏览器,你就从不办法依次增加列表内容。而在PC桌面平台测量检验时,它的 CPU耗用率也是异常高(版本是jQuery Mobile的alpha4)。小编的品种应用它,主若是思量到相持简便易行(对比便于破解),因为那几个库是基于jQuery打造的,所以任何叁个盛名的网页程序猿都很轻巧上手。

趣事Sencha Touch比jQuery Mobile更成熟更加快。但本人一看见高复杂性的事物,笔者就不会不自觉地恨恶它们。因为潜意识会告诉本人,有非常多功能笔者有史以来不会利用到,但却强制加载那一个额外的事物到自个儿使用里,让自个儿使用全体表现差了过多。固然作者可能是错的,PhoneGap应用页中最强盛的无绳话机使用是IGN Dominate,它运营得很流畅何况它正是借助Sencha Touch开辟的,但本人鲜明他们迟早花了好些个日子去优化那一个产品。

调治将养和修改

在地点聊起的费用HTML5应用时,许五个人可能都忽视了少数,其实调节和测量试验或改变二个HTML5采用是很简短的。任何二个曾插足过大型HTML5付出品种的开荒人士都可以告知您,调节和测量检验和保险大约占了整个项不熟悉命周期的十分之七的小运,以致越多。那就是说,当您听到叁个开拓工具宣称可以在15秒钟内开荒多个推搡应用时,那么它可能只是能令你在15分钟内消除五分二的做事,剩下的 七成,你只怕得耗上3倍以上的精力才干势如破竹。

HTML5有线电话采取在调解时存在触碰难点,因为不可能打字与印刷出调整台的日志。所以,如若JavaScript代码存在缺陷还是报错,你需求alert()报错,不然你或许没办法开掘。PhoneGap考订了这一个难点,它能够通过 XCode的调节台打字与印刷调整台的调式日志,但功用依然很单薄。

当前最可行的缓慢解决方案便是weinre。即便破绽百出,但它便是能跑起来,有了它,你还能够断点调节和测量检验你的手提式有线电话机选取的UI,weinre是依据WebKit的网页检查器的,它的调式工具后台通过远程服务端获取和替换调节和测量试验代码。两至三周前,小编曾对网页检查器的代码做过局地琢磨,笔者意识把它转换为贰个远程调节和测量试验器真的轻巧。Weinre接下来多少个月的开辟进度将会越来越快,有些人也许还大概会支付出它的代表产品。大家拭目以俟。

前程几年,移动使用开拓中的HTML5技术的调护医疗工具无疑变得越来越重要,它能够减轻超越四分之二开荒人士五分之四的职业量。你想要用Objective-C改动你的界面设计吗?编辑,再编译,运营。重复那多少个步骤直到你称心截止。假如再编译步骤比比较多,那恐怕会耗上一天的时光。用HTML5技艺去得以达成?用weinre编辑一些CSS属性并测量检验,你如故毫非亲非故闭应用,你就能够三回九转调节和测量检验。一定水平上,你还足以在桌面浏览器调节和测量试验你的HTML5有线电话选择。但相信本身,你的选用产品最后恐怕只会在运动设备上产生一大堆漏洞而已,所以您无法不得利用 weinre。

不好的是,大家常陈赞有个别工具包或许某项功能,但您却比少之又少听到有人叫好某些调节和测验工具非常的棒。所以自个儿猜想纵然它是HTML5手机程序猿最常用到的工具,大家也少之甚少听到它被谈论到。

总括:以往的场景

就算那篇文章真的有一点长,但自个儿要么得总计一下:

  • 1. 在活动道具花费HTML5行使唯有二种格局,要不就是全利用HTML5的语法,要不便是仅使用JavaScript引擎。
  • 2. JavaScript引擎的营造方式让制作手提式有线电话机网游成为恐怕。由于分界面层很复杂,作者已订购了多个UI工具包去使用。
  • 3. 纯HTML5手提式有线电电话机使用运维缓慢并错漏百出,但优化后的职能会更始。固然不是不胜枚举人甘愿去做如此的优化,但还是能够去尝试。
  • 4. HTML5有线电话接纳的最大优势正是能够在网页上直接调节和测量试验和修改。原生应用的开荒人士只怕供给开支不小的马力技能落得HTML5的魔法,不断地重复编码、调节和测量试验和周转,这是她们首先得消除的三个难题。
  • 5. 是的,HTML5的移植特轻便,但小编假诺每种人都会让那成为一个自动化操作。

原文:Kou Man Tong
译文:Norris Lin

 

赞 收藏 评论

澳门太阳娱乐集团官网 1

1.尽量单页面开采

meta

HTML5平移支付中的一些webkit专门项目尾部标签,能够补助浏览器越来越好的剖析HTML代码,进而为HTML5运动支付提供更加好的前端表现与体会

 

2.谨慎选用前端UI框架,新手最佳本人入手。

viewport网页缩放

1
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />

3.动画特效达到60fps

UTF-8编码

1
<meta charset="utf-8" />

4.尺寸单位是用rem,即字体的大幅度,字体宽度可借助 window.width/number.

SEO寻找引擎相关安装

1
2
3
4
5
6
7
8
<!-- 作者 -->
<meta name="author" contect="..." />
<!-- 关键词 -->
<meta name="keywords" content="..." />
<!-- 描述 -->
<meta name="description" content="..." />
<!-- 抓取 -->
<meta name="robots" content="..." />

iOS系统相关安装

1
2
3
4
<!-- 禁用自动识别电话号码 -->
<meta name="format-detection" content="telephone=no" />
<!-- 禁用自动识别电子邮件 -->
<meta name="format-detection" content="email=no" />

Safari浏览器相关安装

1
2
3
4
5
6
<!-- 强制全屏 -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- 设置状态栏颜色 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- 设置添加至主屏标题 -->
<meta name="apple-mobile-web-app-title" content="..." />

UC浏览器相关安装

1
2
3
4
5
6
<!-- 强制竖屏 -->
<meta name="screen-orientation" content="portrait" />
<!-- 强制全屏 -->
<meta name="full-screen" content="yes" />
<!-- 应用模式 -->
<meta name="browsermode" content="application" />

QQ浏览器相关安装

1
2
3
4
5
6
<!-- 强制竖屏 -->
<meta name="x5-orientation" content="portrait" />
<!-- 强制全屏 -->
<meta name="x5-fullscreen" content="true" />
<!-- 应用模式 -->
<meta name="x5-page-mode" content="app" />

360浏览器相关安装

1
2
<!-- 启用极速模式 -->
<meta name="renderer" content="webkit" />

WP手提式有线电话机相关设置

1
2
<!-- 禁用点击高光效果 -->
<meta name="msapplication-tap-highlight" content="no" />

Weibo社交标签相关安装

1
2
3
4
5
6
7
8
9
10
<!-- 展示标题 -->
<meta property="og:title" content="..." />
<!-- 展示描述 -->
<meta property="og:description" content="..." />
<!-- 展示类型 -->
<meta property="og:type" content="..." />
<!-- 展示图片 -->
<meta property="og:image" content="..." />
<!-- 展示链接 -->
<meta property="og:url" content="..." />

 

link

令你的WebAPP看上去更像NativeAPP,带来差别等的客户体验

RSS订阅

1
<link rel="alternate" type="application/rss+xml" href="rss.xml" title="RSS" />

主屏Logo相关设置

1
2
3
4
5
6
7
8
9
10
<!-- Favicons -->
<link rel="shortcut icon" type="image/ico" href="..vicon.ico" />
<!-- Android -->
<link rel="icon" sizes="196x196" href="..icon-196x196.png" />
<!-- iPhone、iTouch -->
<link rel="apple-touch-icon-precomposed" href="..icon-57x57.png" />
<!-- Retina iPhone、Retina iTouch -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="..icon-114x114.png" />
<!-- Retina iPad -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="..icon-144x144.png" />

iOS运行动画相关安装

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!-- iPhone、iPod Touch竖屏 -->
<link rel="apple-touch-startup-image" href="..icon-320x480.png" />
<!-- Retina iPhone、Retina iPod Touch竖屏 -->
<link rel="apple-touch-startup-image" sizes="640x960" href="..icon-640x960.png" />
<!-- Retina iPhone 5、Retina iPod Touch 5竖屏 -->
<link rel="apple-touch-startup-image" sizes="640x1136" href="..icon-640x1136.png" />
<!-- iPad竖屏 -->
<link rel="apple-touch-startup-image" sizes="768x1004" href="..icon-768x1004.png" />
<!-- iPad横屏 -->
<link rel="apple-touch-startup-image" sizes="1024x748" href="..icon-1024x748.png" />
<!-- Retina iPad竖屏 -->
<link rel="apple-touch-startup-image" sizes="1536x2008" href="..icon-1536x2008.png" />
<!-- Retina iPad横屏 -->
<link rel="apple-touch-startup-image" sizes="2048x1496" href="..icon-2048x1496.png" />

 

至于meta与link的设置项其实还会有过多,由于太过冷门,就不一一列举了

本文由澳门太阳娱乐集团官网发布于网页制作,转载请注明出处:HTML5运动支付中的meta与link

上一篇:关于醋的流言与真相 下一篇:没有了
猜你喜欢
热门排行
精彩图文