html5foriphone
① 如何让苹果的Safari支持html5中的pattern
safari 是支持pattern的吧,只是如果不匹配的话,仍然是可以提交表单的,这个就需用js处理下了 Form validation可以用这个判断下了
Method of setting required fields and field types without requiring javaScript. This includes preventing forms from being submitted when appropriate, the checkValidity() method as well as support for the :invalid, :valid, and :required CSS pseudo-classes.
② HTML5怎么做出苹果折叠菜单的效果
1、在网页<head>区添加以下样式定义 :
<style type="text/css">
#dlmenu {height:10em;}
#menu {list-style-type:none; margin:0 0 10px; padding:0; position:absolute; width:15em; background:#fff; z-index:100;}
#menu li {display:block; padding:0; margin:0; position:relative; z-index:100;}
#menu li a, #menu li a:visited {display:block; text-decoration:none;}
#menu li dd {display:none;}
#menu li:hover, #menu li a:hover {border:0;}
#menu li:hover dt a , #menu li a:hover dt a {background:#d4d8bd url(top_grad_2.gif) center center; color:#ff0; }
#menu li:hover dd, #menu li a:hover dd {display:block;}
#menu li:hover dl, #menu li a:hover dl {height:20em; background:#b4be9c url(sub_grad.gif);}
#menu table {border-collapse:collapse; padding:0; margin:-4px; font-size:1em;}
#menu dl {width: 15em; margin: 0; background: #6f9c6f; cursor:pointer;}
#menu dt {margin:0; padding: 0; font-size: 1.1em; border-top:1px solid #cce;}
#menu dd {margin:0; padding:0; font-size: 1em; text-align:left; }
.gallery dt a, .gallery dt a:visited {display:block; color:#fff; padding:5px 5px 5px 10px; background:#949e7c url(top_grad.gif) center center;}
.gallery dd a, .gallery dd a:visited {color:#000; min-height:1em; text-decoration:none; display:block; padding:4px 5px 4px 20px; background:#b4be9c url(sub_grad.gif);}
* html .gallery dd a, * html .gallery dd a:visited {height:1em;}
.gallery dd a:hover {background:#7aa; color:#ff0;}
</style>
2、在网页<body>区添加菜单HTML代码
<div id="dlmenu">
<ul id="menu">
<li>
<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
<dl class="gallery">
<dt><a href="../menu/index.html">DEMOS</a></dt>
<dd><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></dd>
<dd><a href="../menu/embed.html" title="Wrapping text around images">wrapping text</a></dd>
<dd><a href="../menu/form.html" title="Styling forms">styled form</a></dd>
<dd><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></dd>
<dd><a href="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></dd>
<dd><a href="../menu/old_master.html" title="Image Map for detailed information">image map</a></dd>
<dd><a href="../menu/bodies.html" title="fun with background images">fun with backgrounds</a></dd>
<dd><a href="../menu/fade_scroll.html" title="fade-out scrolling">fade scrolling</a></dd>
③ 如何使用html5调用iPhone的后置摄像头
html5需要使用接口chrome30+ for android 已经实现了利用webcam,调用手机后置摄像头,代码如下:
<!DOCTYPE html>
<html xmlns="">
<head>
<title>HTML5 GetUserMedia Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
</head>
<body>
<input type="button" title="开启摄像头" value="开启摄像头" onclick="getMedia();" /><br />
<video height="120px" autoplay="autoplay"></video><hr />
<input type="button" title="拍照" value="拍照" onclick="getPhoto();" /><br />
<canvas id="canvas1" height="120px" ></canvas><hr />
<input type="button" title="视频" value="视频" onclick="getVedio();" /><br />
<canvas id="canvas2" height="120px"></canvas>
<script type="text/javascript">
var video = document.querySelector('video');
var audio, audioType;
var canvas1 = document.getElementById('canvas1');
var context1 = canvas1.getContext('2d');
var canvas2 = document.getElementById('canvas2');
var context2 = canvas2.getContext('2d');
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
window.URL = window.URL || window.webkitURL || window.mozURL || window.msURL;
var exArray = []; //存储设备源ID
MediaStreamTrack.getSources(function (sourceInfos) {
for (var i = 0; i != sourceInfos.length; ++i) {
var sourceInfo = sourceInfos[i];
//这里会遍历audio,video,所以要加以区分
if (sourceInfo.kind === 'video') {
exArray.push(sourceInfo.id);
}
}
});
function getMedia() {
if (navigator.getUserMedia) {
navigator.getUserMedia({
'video': {
'optional': [{
'sourceId': exArray[1] //0为前置摄像头,1为后置
}]
},
'audio':true
}, successFunc, errorFunc); //success是获取成功的回调函数
}
else {
alert('Native device media streaming (getUserMedia) not supported in this browser.');
}
}
function successFunc(stream) {
//alert('Succeed to get media!');
if (video.mozSrcObject !== undefined) {
//Firefox中,video.mozSrcObject最初为null,而不是未定义的,我们可以靠这个来检测Firefox的支持
video.mozSrcObject = stream;
}
else {
video.src = window.URL && window.URL.createObjectURL(stream) || stream;
}
//video.play();
// 音频
audio = new Audio();
audioType = getAudioType(audio);
if (audioType) {
audio.src = 'polaroid.' + audioType;
audio.play();
}
}
function errorFunc(e) {
alert('Error!'+e);
}
// 将视频帧绘制到Canvas对象上,Canvas每60ms切换帧,形成肉眼视频效果
function drawVideoAtCanvas(video,context) {
window.setInterval(function () {
context.drawImage(video, 0, 0,90,120);
}, 60);
}
//获取音频格式
function getAudioType(element) {
if (element.canPlayType) {
if (element.canPlayType('audio/mp4; codecs="mp4a.40.5"') !== '') {
return ('aac');
} else if (element.canPlayType('audio/ogg; codecs="vorbis"') !== '') {
return ("ogg");
}
}
return false;
}
// vedio播放时触发,绘制vedio帧图像到canvas
// video.addEventListener('play', function () {
// drawVideoAtCanvas(video, context2);
// }, false);
//拍照
function getPhoto() {
context1.drawImage(video, 0, 0,90,120); //将video对象内指定的区域捕捉绘制到画布上指定的区域,实现拍照。
}
//视频
function getVedio() {
drawVideoAtCanvas(video, context2);
}
</script>
</body>
</html>
HTML5 The Media Capture API提供了对摄像头的可编程访问,用户可以直接用getUserMedia获得摄像头提供的视频流。但实际上用html5调用手机摄像头存在很多问题:
1)谷歌的发布的Chrome到了21版本后,才新增了一个用于高质量视频音频通讯的getUserMedia API,该API允许Web应用程序访问摄像头和麦克风,其他手机浏览器只有opera支持html5调用本地拍照功能
2)两个浏览器均不支持访问多个摄像头:chrome不支持访问后置摄像头,pera支持访问后置摄像头的
④ iPhone5空间发说说为什么不显示for iPhone
现在是没有QQ for xxxx的,只有QQ上能看出来[通过iphone登录]
⑤ html5 app开发用什么工具
1、Adobe Edge
Adobe Edge的目的是帮助专业设计师制作网页动画乃至简单游戏。该工具的重点放在动画引擎上,但adobe承诺将增加更多HTML5功能,比如Canvas、HTML5音频/视频标签等。支持Android、iOS、webOS、黑莓PlayBook、Firefox、Chrome、Safari和IE9等各个平台。
2、Adobe Dreamweaver
Adobe Dreamweaver使用所见即所得的接口,亦有HTML(标准通用标记语言下的一个应用)编辑的功能,借助经过简化的智能编码引擎,轻松地创建、编码和管理动态网站。[2]访问代码提示,即可快速了解HTML、CSS和其他Web标准。[2]使用视觉辅助功能减少错误并提高网站开发速度。
3、HBuilder
HBuilder是DCloud(数字天堂)推出的一款支持HTML5的Web开发IDE。HBuilder的编写用到了Java、C、Web和Ruby。HBuilder本身主体是由Java编写。它基于Eclipse,所以顺其自然地兼容了Eclipse的插件。
4、WebStorm
WebStorm 是jetbrains公司旗下一款JavaScript 开发工具。目前已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源,继承了IntelliJ IDEA强大的JS部分的功能。
⑥ 苹果有多爱HTML5
本文记录了在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跨平台开发。.
⑦ 发表说说为什么不显示 for iphone (是出啥问题老)
- -真无聊,我现在满世界找不显示iPhone在线的扣扣版本
⑧ mac系统如何去掉flash用html5浏览器用的safari
Flash问题
去下载 chrome For MAC
还有一个输入法,,苹果系统没怎么用过,所以帮不了你,不好意思
⑨ Adobe Flash Professional CS5 的组件 Packager for iPhone 是做什么的
Adobe Media Encoder 是一个视频和音频编码应用程序,可让您针对不同应用程序和观众,以各种分发格式对音频和视频文件进行编码。这类视频和音频格式的压缩程度更大。Extension Manager 扩展是一段可以添加到 Adobe 应用程序以增强应用程序功能的软件。 您可以将扩展添加到 Adobe® Dreamweaver®、Adobe Flash® 和 Adobe Fireworks® 中。 使用 Adobe Extension Manager,您可以在许多 Adobe 应用程序中轻松便捷地安装和删除扩展,并查找关于已安装的扩展的信息。 它还提供了导航到 Adobe Exchange 站点的便捷方式,您可以在这个站点上找到更多扩展,获得与扩展有关的信息,并评估已使用的扩展。 安装 Dreamweaver、Flash 或 Fireworks 时将自动安装 Extension Manager。 注: Extension Manager 只显示使用 Extension Manager 安装的那些扩展。 Extension Manager 中不会自动显示使用第三方安装程序安装的扩展,也不会自动显示对配置文件所做的本地更改。Adobe Device Central 为移动内容开发人员和测试人员提供了一种方式,可以在多种设备上轻松地创建和预览移动内容。 Adobe Device Central 可以显示多种移动设备的逼真皮肤,即显示设备外观以及内容在这些设备上的显示外观。这使您可以与模拟的设备进行交互,而且就像真实世界中的交互一样,包括测试不同的性能级别、存储器、电池电量和灯光类型。Adobe Device Central 提供了一个可供选择的设备库。每个设备都有一个包含设备相关信息的配置文件,其中包括设备所支持的媒体和内容类型(即各个设备上可以使用的内容,例如屏幕保护程序、墙纸和独立 Flash Player)。 您可以搜索所有可用的设备、比较多个设备和创建常用的自定设备组。Adobe Device Central 支持不同的媒体格式,包括 Flash 格式、位图格式、视频格式和 Web 格式。Adobe Media Player Adobe发布的媒体播放器,使该公司进入媒体播放领域。 Adobe Media Player使用户无需借助Web浏览器就可以播放Flash视频。Adobe Media Player之前的代号为Philo,用户可以离线以全屏方式观看Flash视频(需安装了支持H.264的Flash Player Beta版本),还具备一键点击观众评分功能以及可以自动下载喜爱电视剧剧集或视频podcast新内容的收藏夹功能。