天气服务维护中|Weather service is being repaired 登陆 注册 密码找回

iPhone5和iOS6上HTML5开发的新增功能

由 博爱 2016年 10月 1日 发布于: 浏览: 3,366 次

iPhone5和iOS6上HTML5开发的新增功能

开发移动应用到底是选择Native、Web应用或者混合应用?

答案是不同的移动应用需要不同的技术,选择合适的就行。

其实大多数移动应用,不管是企业移动应用还是互联网移动应用,

90%都可以使用基于HTML5的Web技术就足够。

在Android 4.0和iOS 6以上浏览器已经是最快的应用了,比任何本地的微博、微信都快,

无须更新升级,无须上传分裂的APP市场,

无须突然被苹果下架应用。再看看最近发布 Firefox OS 开发手机的配置也大概知道,运行大多数应用不需要那么高配置。

目前主流的智能终端中,

iOS6对HTML5的支持程度仍旧是最好的,

领先于Android和Windows phone。随着iPhone5的性能再次翻倍,

以及iOS不断提升的canvas渲染性能,

加之Android的webGL,Win8/

wp8的本地api对Javascript开放,

性能已经不再是开发优秀移动应用的主要屏障,

如今要考虑的是如何发挥HTML5的优势做出用户喜欢的应用。

下面看看iPhone5和iOS6上HTML5开发的新增功能。

iPhone 5

新的屏幕尺寸

新模拟器

你需要做的

问题

iOS 6的新功能

文件上传、具有媒体捕捉摄像头的访问和文件API

网络音频API

本机应用程序集成的智能应用横幅

CSS 3过滤器

交叉淡入淡出CSS 3

CSS Partial图片支持

全屏支持

动画计时API

支持多分辨率的图像

Passbook优惠券和月票交付

存储API和Web应用程序的变化

本机Web应用程序的Web View的改变

远程Web Inspector调试

更快的JavaScript引擎和其他新功能

iPhone 5

新的iPhone 5,以及自从iPod Touch第5代开始,在Web开发方面有一个大的变化:

屏幕分辨率。 这些设备具有宽4寸屏幕,WDVGA(广角双 VGA)640×1136像素,326 DPI的Retina Display。 这些设备和iPhone 4/4S一样具有相同的宽度但高176像素。

新模拟器

包含iPhone 5仿真器的Xcode4 iOS 模拟器

新的Xcode 4(Mac AppStore?)包括更新后的iPhone模拟器。 新版本的iPhone模拟的三个选项:

iPhone:iPhone 3GS,iPod Touch的第一,第三代

iPhone Retina 3.5“:iPhone 4,iPhone 4s,iPod Touch的第四代

iPhone Retina 4“:iPhone5,iPod Touch的第5代

新的模拟器还包括取代谷歌地图的新地图应用程序和Passboo

k。

你需要为新设备做的

通常情况下,如果你的网站/应用程序进行了优化,可垂直滚动,

不应该有任何问题。 同一个视口(Viewport)中,图标和iPhone 4/4S技术应能正常工作。 但当更新了iOS,同时也更新了Web View:这意味着所有的本机Web应用程序,

如PhoneGap/Apache Cordov应用程序和伪浏览器,

如iOS上谷歌浏览器也更新了。 但是, 如果您的解决方案是高度相关的,那么可能有一个问题,

看看下面的例子,iPhone 4和iPhone 5的谷歌地图网站。 由于这是说作为一个恒定的高度,不隐藏状态栏,

并在底部有一栏空白。

如果你设计了一个特定高度的谷歌地图。 正如你可以看到的(右图来自iPhone 5)有一个白色的底栏和URL地址栏无法隐藏,

因为没有足够的内容。

如果您使用的是响应性的Web设计,你不应该有太多的麻烦,

通常情况下,RWD技术使用的是宽度而不是高度作为条件。

设备检测

在写这篇文章的时候,还没有iPhone 5在市面上。 没有办法在服务器端检测iPhone 5 。 用户代理只有iOS 6系统的iPhone,

以及使用完全相同的用户代理的iOS6系统的iPhone 4S和iPhone 5。

Mozilla/5.0 (iPhone; CPU iPhone OS 6_0 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Version/6.0 Mobile/10A403 Safari/8536.25

因此, 客户端检测4寸iPhone设备唯一的方法来是使用JavaSc

ript或媒体查询。请记住,这些器件具有1136像素的高度,

但我们所谈论的CSS像素(独立分辨率像素)约568像素高度,

为这些设备像素的一半。

isPhone4inches = (window.screen.height==568);

使用CSS媒体查询和响应性Web设计技术,

我们可以检测到iPhone 5使用:

@media (device-height: 568px) and (-webkit-min-device-pixel-

ratio: 2) {

/* iPhone 5 or iPod Touch 5th generation */

}

主屏幕的webapps

主屏幕的webapps问题似乎是很严重的。 我已经报告了这个问题,在NDA还没有来自苹果的任何答案。

当你添加一个网站的首页到屏幕,支持apple-

mobile-web-app-

capable元标签的web应用只工作在iPhone 3.5“仿真模式(它不考虑整个高度)。

在图像里能看到黑栏条。 这是iPhone 5和新iPod Touch默认情况下全屏幕webapp。

如果操作系统是不确定是否支持更宽的屏幕,

不给web应用扩展高度是一个好主意。 如果你提供一个apple-touch-startup-

image为640×1096,iPhone 5将它调整大小为640×920放在主屏幕。

解决方案是, 你需要忘记viewport的width=device-

width or width=320。 如果不提供viewport,webapps将正常工作。 同样的,如果你使用其他属性而不是宽度也类似,

如果你不希望viewport默认980px,可以这样:

甚至如果指定一个不同于320宽可以这样:

不动viewport,下面的脚本也可以达到目的:

if (window.screen.height==568) { // iPhone 4″

document.querySelector(“meta[

name=viewport]”).content=”

width=320.1″;

}

如果程序启动图像为640×1096,

并在不同的设备上使用不同的图像,你可以使用媒体查询。 一些报道说,你需要将启动图片象本机程序一样命名为“

[email protected]”但不正确。 不过你想要的话,可以将它命名。 但大小属性被完全忽略。

您可以使用媒体查询,提供不同的启动图片:

我们也可以使用HTML5新的布尔属性请求multiple文件

。 在这种情况下,用户可以不使用相机作为源。

我们可以使用文件上传访问摄像头和相册

虽然没有办法强制使用摄像头, 但我们可以使用accept属性只指定想捕捉的图像或视频。

不支持其他类型的文件 ,如音频,Pages文档或PDF文件。 也没有getUserMedia摄像头的实时流媒体支持。

有图片和视频选择后你能做什么呢?

使用multipart POST表单提交上传

使用

XMLHttpRequest

2 AJAX上传(甚至进度支持)

使用

文件API

,在iOS 6允许JavaScript直接读取的字节数和客户端操作文件。

HTML5ROCKS

有一个很好的API例子。

网络音频API

HTML5游戏开发商应该是喜欢!

网络音频API

在移动浏览器

第一次出现。 这个JavaScript API允许我们处理和合成音频。 如果你从来没有玩过一些低级别的音频,

API可能看起来有点怪异,但一段时间以后就不难理解了。 同样,

HTML5ROCKS

有一个好文章使用音频API上手。

API更多的信息和消息在

http://www.html5audio.org

智能应用程序横幅

网站还是本机应用程序? 如果我们都有,

现在我们可以将我们的网站与我们的本机应用程序连接 。 有了智能应用程序横幅,当网站上有一个相关联的本机应用程序时,

Safari浏览器可以显示一个横幅。 如果用户没有安装这个应用程序将显示“安装”按钮,

或已经安装的显示“查看”按钮可打开它。 我们也可以从网络发送参数给本机应用程序。 例如打开与用户在网站上看到内容相同的本机应用程序位置。

要定义一个智能应用程序横幅,我们需要创建一个meta标签, 名称=“apple-itunes-app”。 首先,我们需要去

iTunes Link Maker

搜索我们的应用程序和应用程序ID。

我们可以使用 app-argument 提供字符串值,如果我们参加的

iTunes联盟计划

我们还可以添加子公司相同的元标记数据

title” content=”My App Name”>

我还发现, apple-mobile-web-app-

orientations接受的可能值有portrait, portrait-upside-down, landscape-right, landscape-left, portrait-any。

Web View更新

Web View(pseudobrowsers,PhoneGap/

Cordova应用程序,嵌入式浏览器) 上Javascript运行比Safari慢3.3倍(或者说,

Nitro引擎在Safari浏览器是Web应用程序是3.

3倍速度)。

我们可以找到一些其他的好消息:

web应用程序的调试Remote Web Inspector

一个新的supressesIncrementalRender

ing的布尔属性,改进了部分呈现机制 。 我相信,以减少加载网页感觉,这个功能是非常有用的。

一个新的WebKitStoreWebDataForBacku

p info.plist的布尔功能,

在这里我们可以定义我们要存储在本地存储和Web SQL数据库进行备份的地方,如在iCloud。 这个问题已经出现在iOS 5.01,现在它解决了

开发者协议的改变 似乎限制只使用本地的WebView来解析HTML和JS的了。 这很好,如果有人从苹果可以证实这一点。 内部WebKit引擎它是唯一能够下载并执行新的代码的引擎,

确保预期相同的应用程序行为 。 如果你不从网络上下载的代码您可以使用自己的引擎。 这可能打开一扇门…如提供我们自己的engine,例如,

WebGL支持。

远程调试

这是对Web开发人员一个巨大的变化。 iOS上Safari第一次,包括官方的Remote Web Inspector。 因此,

iWebInspector

或Weinre工具,

将因为这个版本将变得过时。 远程调试器可以与模拟器或通过USB连接设备一起工作。

要启动远程检查会话,你需要使用桌面

Safari 6浏览器

。 这是坏消息:你只能在Mac桌面电脑上调试你的web应用。 这是一个无声的变化,

但适用于Windows的Safari已不存在,

所以它停留在5.x中 因此,只有与Mac OS计算机,您才可以在您的iOS设备开启(至少现在正式)

网络调试会话。

出于安全考虑,您需要先启用Web检查器“设置”>“

Safari浏览器”>“高级”。 新的检查手段意味着旧的JavaScript控制台是不可用了。

您可以启动调试会话:

在您的iOS设备或模拟器的Safari窗口

在您的iOS设备或模拟器上安装的chrome-less webapp程序

使用Web View本机应用程序,如Apache Cordova/ PhoneGap的应用程序。

在谈到本机应用程序,你只可以检查,由Xcode(

自己的应用程序)安装在设备的应用程序。 因此,没有办法在网站的检查iOS上的谷歌浏览器。

如果您正在使用Webkit Inspector 连Safari 5或Chrome,你会在Safari 6看到一个完全重新设计版本的Inspector基于Xcode

的本机开发的UI。 用Inspector调式会话,您可以:

查看 HTML和CSS实时的变化

访问您的存储:cookies,本地存储,

会话存储和SQL数据库

审查Profile web应用,包括网络请求,

布局和渲染和JavaScript和事件的表现报告。 这是性能工具方面迈出的一大步。

搜索你的DOM

在一个地方查看所有的错误和警告

管理你的workers(线程)

管理JavaScript断点,并确定未捕获的异常断点。

访问控制台和执行JavaScript

调试JavaScript代码

触摸检查:在inspector里面有一个小手图标,

可以让你在设备上触摸和在inspector发现DOM元素。

苹果干得好,我们在iOS上等这个已经很长一段时间 。 Apache Cordova 用户使用此功能也应该喜欢。

其他较小的更新

苹果公司声称有一个更快的JavaScript引擎 。 它似乎是真实的。 在SunSpider测试中,我在同一设备上iOS 5.1和iOS 6的JavaScript性能提高20%。

谷歌地图在iOS 6 上不再可用,现在http://maps.google.com

重定向到谷歌地图的网站,而不是本机应用程序。 因此有一个新的URL 模式,maps,这将打开本机的新的地图应用程序。 语法是maps:?q=

query可以是搜索词或经纬度(以逗号分隔)。 要启动路线导航,参数是:maps:?saddr=<

source>&daddr=

XHR2:

现在XMLHttpRequestProgressEvent得

到支持

autocomplete属性的输入遵循DOM规范

来自DOM4的Mutation Observers已经实现。 您可以使用WebKitMutationObserver构造器

捕获DOM的变化

Safari不再总是对用 -webkit-transform:preserve-3d 的元素创建硬件加速层, 我们应该停止使用。

通过window.selection 的Selection API

元素

Canvas更新 :createImageData有一个参数,

现在有两个新的功能做好准备,

用webkitGetImageDataHD和webkitPu

tImageDataHD提供高分辨率图像 。

更新SVG处理器和事件构造函数

新的CSS viewport的有关测量:VH(viewport的高度),

VW(viewport宽度)和VMIN(VW和VH之间最小)

CSS3 Exclusions 和CSS Regions提供Beta 1版,但他们在最终版本中被删除。 这是一个耻辱,虽然他们太新,还不够成熟。

iCloud 标签 。 您可以在所有的设备,包括Mac电脑,

iPhone和iPad之间同步您的标签。 所以,相同的URL将通过所有的设备。 要小心使用移动网络架构!

我们仍在等待

有一些东西,我们仍然需要等待下一个版本,如:

索引型数据库IndexedDB

文件系统API

性能Timing API

WebRTC和getUserMedia

WebGL仍然被禁用

游戏/ inmersive应用程序的方向锁定API

集成Facebook和Twitter帐户的原生API,

所以我们可以使用当前操作系统的用户的凭据自动,

而不是迫使用户重新登录。

最后的思考

在iOS 6上的Safari是为

HTML5开发

调试工具迈出了一大步 ,新的API,更好的JavaScript性能。 不过,我必须说,

苹果仍然忘记了文档更新和适当地与Web开发人员沟通。

猜你喜欢

分享给QQ好友或群转发到QQ空间转发到微信朋友圈转发到新浪微博
上一篇: 下一篇:
发表评论