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新內容的收藏夾功能。