网站建设资讯

NEWS

网站建设资讯

html5苹果,html5苹果加速度传感器

html5中localStorage 在苹果设备上总结

if (typeof localStorage === 'object') {

在从江等地区,都构建了全面的区域性战略布局,加强发展的系统性、市场前瞻性、产品创新能力,以专注、极致的服务理念,为客户提供成都网站设计、成都网站制作 网站设计制作定制设计,公司网站建设,企业网站建设,成都品牌网站建设,营销型网站,外贸网站制作,从江网站建设费用合理。

try {

localStorage.setItem('localStorage', 1);

localStorage.removeItem('localStorage');

} catch (e) {

Storage.prototype._setItem = Storage.prototype.setItem;

Storage.prototype.setItem = function() {};

alert('Your web browser does not support storing settings locally. In Safari, the most common cause of this is using "Private Browsing Mode". Some settings may not save or some features may not work properly for you.');

}

}

苹果为什么支持html5技术呢?

不是所有的苹果设备都不支持Flash,所以你指的应该是iOS吧。当时的官方说法,主要是缘于当时Flash播放器过于耗电,不适合移动设备。考虑到当时经常会有打开了Flash网页时的笔记本电脑(尤其是非Windows系统)发热显著上升的体验,这点可以算是事实。由于大多数门户网站都内嵌了Flash广告,因而浏览网页时的确很有可能会显著消耗电池电量。相比之下,HTML5的视频播放由于实现时较有效利用了硬件资源,所以能耗方面可以优化,而类似于Flash的矢量动画,虽说用HTML5实现不见得能提升多少性能(如果不是降得更低),但毕竟HTML5的页面广告几乎没有,所以砍掉Flash的确有可能大幅减少网页浏览时的CPU计算量。既有的Flash应用通常基于鼠标动作,对触摸支持不够好。这也是另一官方的理由。安全性:内置Flash支持意味着有可能引入相关的安全漏洞,而Flash实现由Adobe掌控,一旦出现问题,苹果难以直接把握。另外,较为流行的非官方观点:基于Flash平台的应用非常丰富,很有可能威胁到苹果自家的AppStore:假如大家都上网玩儿免费的Flash版的游戏去了,就不会再去买AppStore上的同类产品,苹果也就分不到钱了。

苹果有多爱HTML5

 我们和其他人一样,对于前不久苹果iOS 8的发布感到十分激动。在做这个测试的时候,我们手中只有iOS 8 GA版,但我们想最快的将测试结果提供给全球的web开发者,所以这个测试结果和iOS 8正式版的结果有所出入并不出奇,但是现在我们只想尽快的将benchmark和各种测试跑起来,并且分享我们发现的结果。

本文记录了在iOS 8成为苹果设备基准的现在,对其进行了当前版本HTML5的性能测试结果,和测试发现的技术问题。

iOS 8新特性将促进HTML5开发

让我们先来看看升级iOS 8的一些新特性。

这些特性对促进HTML5开发很有帮助,我们挑选出其中重要的几条:

WebGL 3D Graphics

3D图形的硬件加速支持,对web开发者来说这无疑是一个非常重要的特性。我们很想看到这条特性在游戏中有更多的应用,不过它还有更多的其它用法,特别是在动画和变换的领域里。想快速了解它能干什么,点击 WebGL Sprite Particle Demo

CSS Shapes

能够控制文字层的形状,来形成更为多变的文字布局。

HTML模板

Web组件的基础元素之一。它让我们离真正的Web模块化和更多潜在应用又近了一步,我们将更少的依赖polyfill。

导航/更精确的计时API

多数人可能用不到,但对于测试来说是非常赞的特性。

IndexedDB

HTML5的Web SQL标准已不再维护并很可能在将来被废弃,使用IndexedDB将拥有很好的跨平台支持(iOS、Android、Chrome for Android、Safari、IE移动版等)。

SVG片段标示符

这个特性隐藏在神秘的名字下面,但相信我们,它是一个非常强大的特性。它能构建非常强大的向量化精灵表。这不仅在web游戏中非常重要,在动态图标和其他动态UI组件里也非常重要。

作为移动web开发者,你可能已经习惯于以最新浏览器特性为目标而开发了,我们知道苹果的升级系统能让iOS 8迅速普及,如果你的应用专门为iOS而开发,那么你现在就能利用像IndexedDB、SVG片段标示符等新特性了。如果你想兼容iOS 7或者进行跨平台开发,你能使用Sencha Touch内建的系统探测来利用这些特性。Sencha Touch让你能现在就使用这些新特性并逐步的淘汰旧代码。

全新的WKWebView

随着iOS 8的发布,我们同时痛并快乐着,因为iOS 8带来了一些碎片化的问题。iOS 8里面内建了两个原生的webview,第一个是我们知道并喜爱的UIWebView,它因为兼容性而保留下来,但幸运的是,苹果并没有简单的将旧iOS 7 UIWebView装进iOS 8里,而是升级了WebKit核心模块并发布了全新的WKWebView。WKWebView将被hybrid app所使用。它使用了Nitro JS引擎,经我们测试至少比UIWebView的性能高四倍。这将很有可能引领hybrid app获得巨大成功。不过,目前它还有一些影响所有人的重大bug,下面我们将谈到这一点。

不过好消息是从Web开发的远景看来,全新的高性能WKWebView向着正确的方向走了一大步。即使现在Javascript已经很少成为应用瓶颈,更典型的问题是动画和DOM重绘上,我们相信随着对DOM核心的实质化的改进,WKWebView将帮助Sencha Touch应用在性能上看到巨大的改进。

性能的全面提升

对版本升级的性能测试总是必要的,并且这一次我们发现了一些更有趣的结果。总体上来说,升级到iOS 8看上去对所有用户都有利的。这里有一些指标在iOS 8里稍微下降了,如Base64和代码调用。让我们来仔细的分析一下这些图表,来弄清楚它们都代表什么。

注意:所有测试都在第5代iPod Touch上进行,旨在找出iOS开发所需要面临的性能下限。

这些测试里只有CodeLoad指标iOS 8的表现略低,CodeLoad是评价JS引擎在加载非常大的JS文件后需要花多长时间开始运行,这对于Closure和jQuery这样的库来说是需要引起注意的。

实际的测试表现比图表上的还要好,Dom Query的巨大提升掩盖了其他几项其实也是提升很大的,其中Attributes提升122%、Modification提升65%、Dom Traversal提升48%,而Dom Query的提升则是惊人的308%。

CSS选择器的测试,iOS 8也获得了全面的提升,Ext JS在简单的移到iOS 8 Safari之后即获得126%的时间提升。

需要注意的是CSS选择器使用的是Ext JS 3.x版本,而现在Ext JS 5.x版本已经发布,所以获得的提升还要更大。

这里Base64和Code Eval性能表现有了微小的下降,不过就像前面所说的,相对于对于JS引擎的效率来说,GPU合成才是更值得关注的,而且其他几项的提升也都非常大。

这个测试结果已无需多说,它表明iOS 8在Canvas方面有非常大的改进。

注意这个测试时iOS 8里面两个webview之间测试,WKWebView全面胜出。

Sunspider测试的结果相差不大。

HTML5测试表明了iOS 8在HTML5支持方面也有了明显提升,我们来简单的分析一下其中的重要结果:

· 无缝的iFrame从iOS 8里面移除

· IndexedDB被添加到iOS 8 Safari和WKWebView中

· IndexedDB目前不支持iOS 8 UIWebView和Homescreen app(设置主屏快捷方式的web app)

· Objectstore ArrayBuffer已经在iOS 8 Safari和WKWebView中生效(但是HTML5测试没能测出来,要不然测试得分将达到440分)

· Objectstore ArrayBuffer不支持iOS 8 UIWebView和Homescreen app

· WebGL 3D Graphics被添加到iOS 8 Safari、WKWebView、UIWebView和Homescreen app中

· UIWebView、WKWebView和Homescreen app的userAgent是完全一致的

尽管苹果为了保持WKWebView、UIWebView和Homescreen app有同一水平的可用性而做了不少工作,但其中的差异仍然造成了一些困扰,由于三者的userAgent是一样的,开发者需要自己去标示这三者并小心的使用新特性。

Bug说明

我们都知道没有软件的发布没有伴随着bug的,iOS 8也不例外。经过探索我们发现了3个主要问题,将影响大多数HTML5开发者。

WKWebView 无法加载本地文件

测试中WKWebView无法读取本地文件,这让使用PhoneGap/Cordova开发,能提供离线功能的应用失去了用武之地。比如,它不能加载本地的index.html,但访问Web网站的功能是好的。

XHR本地文件访问

在WKWebView中XHR无法将本地文件发送到Web,比如使用AJAX来提交系统图库中的图片将出现错误。

Homescreen app在锁定/唤醒后失去计时功能

WKWebView中Homescreen app在锁定唤醒之后带计时功能的函数将失效,如setTimeout、requestAnimationFrame等。

不过好消息是这些Bug仅影响WKWebView应用,如果使用iOS 8 UIWebView则不会受到影响。

即将到来

总之,我们非常高兴的看到iOS 8的发布,以及苹果在iOS 8上表明的对HTML5的态度,因为性能改进和新特性将极大的提升用户在iOS 8上使用Web App的体验。

Source: caniuse.com

如果我们看得更远的话,我们会发现iOS 8和Chrome for Android在一些卓越的新特性上有许多交叉,Chrome for Android其实已经部分的支持了WebGL 3D Graphics但一些旧的机型没有能力来驱动它。

总结

对Web开发者来说,iOS 8无疑是一个令人激动的发布,它拥有激动人心的新特性和重大的性能改进,将极大的促进HTML5跨平台开发。

苹果为什么不支持flash,而是用html5技术

关于苹果不支持flash,而是用html5是有多方面原因的。

首先是在于flash本身上。

1、adobe公司的实力自然没必要多讲,flash当年在PC端的实力也是无可匹敌。

2、随着智能手机的发展,也意图在这一领域立足,但是即使是现在的移动设备来说,其对于cpu和gpu的占用量依然很大,功耗自然也大。到后期flash也主动放弃了移动端的市场。

3、相比于PC端的体验,就算是对于支持了flash安卓手机来讲,所谓的用户体验也不会好到哪里。

4、不过对于移动端的使用,不只是flash,html5也是应用甚少。html就当是来言和flash相差很多,对于功耗上的减少也没有优化很多,加上各种漏洞,所以html的优势在当是也无从提起。但是总体上来说开放html5是时代的产物,封闭的flash自然惨遭淘汰。

就上面的东西接着说,说到根本上其实还是利益问题。

1、adobe公司将flash打造成一种自己的APP平台和广告平台。而苹果自身也建立了基于app store的一种封闭的营收模式,两者自然是利益冲突。

2、跨平台的应用也将打破原生应用的用于体验。

3、如果说乔布斯看中的是html5的发展前景也可以,app store和html5分管了应用程序和动画视频,也确实没有必要再用flash。

4、此外,出于对苹果系统安全的考虑也是一方面的原因。

为什么苹果手机为什么不能播放html5播放音乐?

HTML5的Audio标签,目前的主流浏览器都支持,只不过各种浏览器对音频的支持的格式不同,当前,audio 元素支持三种音频格式:

IE 9                支持  MP3

Firefox 3.5     支持  Ogg Vorbis、Wav

Opera 10.5    支持  Ogg Vorbis、Wav

Chrome 3.0   支持  Ogg Vorbis、MP3

Safari 3.0       支持  MP3、Wav

html5标签audio的autoplay属性可以设置在页面打开后自动播放。这个属性本来挺好的。但是最近做了一个项目却发现在iphone上无法自动播放。

各种查阅资料后发现原来iphone公司是考虑到用户可能是用手机流量访问的情况,为了用户流量着想,所以需要用户交互后才能播放。虽然苹果公司是出于好心,但是如果网页打开之后还需要一个交互才能听到美妙的背景音乐,那么网站的体验效果自然差了很多。可是这种问题要怎么解决呢?

冥思苦想了很久,终于做了一个艰难的决定。于是乎就这样尝试了一下:

$(function(){

$("#audio")[0].play(); 

})

没想到竟然好用!!!

全部的代码是这样

html

head

script src="js/jquery.js"/script

/head

body

audio id="audio" src="song.mp3" autoplay="autoplay"

您的浏览器不支持audio标签。

/audio

$(function(){

$("#audio")[0].play();

})

/body

/html


文章标题:html5苹果,html5苹果加速度传感器
分享网址:http://njwzjz.com/article/dsipcge.html