DIV CSS 佈局教程網

設為首頁 加入收藏
 DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML5詳解 >> 移動webapp開發小貼士
移動webapp開發小貼士
編輯：HTML5詳解     

1 創建主屏幕圖標 （Creating a home screen icon ，for iOS）

//57*57<link rel="apple-touch-icon" href="/custom_icon.png"/><link rel="apple-touch-icon" href="touch-icon-iphone.png" /><link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" /><link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone4.png" /><link rel="apple-touch-icon" sizes="144x144" href="touch-icon-ipad-retina.png" />
  • developer.apple.com/library/iOS/#documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.Html
  • developer.apple.com/library/iOS/#documentation/UserExperIEnce/Conceptual/MobileHIG/IconsImages/IconsImages.Html#//apple_ref/doc/uid/TP40006556-CH14

2 啟動畫面圖像 （Creating a splash screen， for iOS）

<!!-- iPhone SPLASHSCREEN--><!link href="apple-touch-startup-image-320x460.png" media="(device-width: 320px)" rel="apple-touch-startup-image" /><!!-- iPhone (Retina) SPLASHSCREEN--><!link href="apple-touch-startup-image-640x920.png" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" /><!!-- iPad (portrait) SPLASHSCREEN--><!link href="apple-touch-startup-image-768x1004.png" media="(device-width: 768px) and (orientation: portrait)" rel="apple-touch-startup-image" /><!!-- iPad (landscape) SPLASHSCREEN--><!link href="apple-touch-startup-image-748x1024.png" media="(device-width: 768px) and (orientation: landscape)" rel="apple-touch-startup-image" /><!!-- iPad (Retina, portrait) SPLASHSCREEN--><!link href="apple-touch-startup-image-1536x2008.png" media="(device-width: 1536px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" /><!!-- iPad (Retina, landscape) SPLASHSCREEN--><link href="apple-touch-startup-image-1496x2048.png" media="(device-width: 1536px) and (orIEntation: landscape) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
  • developer.apple.com/library/iOS/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.Html#//apple_ref/doc/uid/TP40002051-CH3-SW6*stackoverflow.com/questions/4687698/mulitple-apple-touch-startup-image-resolutions-for-iOS-web-app-esp-for-ipad

3 全屏 （Making it full-screen， for iOS）– 更像本地App

<meta name="apple-mobile-web-app-capable" content="yes" />
  • developer.apple.com/library/iOS/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.Html#//apple_ref/doc/uid/TP40002051-CH3-SW2

4 改變狀態欄 （Changing the phone status bar, for iOS）

content屬性default, black and black-translucent

<meta name="apple-mobile-web-app-status-bar-style" content="black" />

*developer.apple.com/library/iOS/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.Html#//apple_ref/doc/uid/TP40002051-CH3-SW1

5 阻止縮放 （Preventing scaling）

<meta name="vIEwport" content="user-scalable=no, width=device-width" />

6 阻止彈性滾動（Preventing elastic scrolling）

<script>function BlockMove(event) { //Tell Safari not to move the window. event.preventDefault() ;}</script><body ontouchmove="BlockMove(event);" > ...</body>

7 檢測屏幕是否旋轉（Detect whether device supports orIEntationchange event, otherwise fall back to the resize event）

//Detect whether device supports orientationchange event, otherwise fall back to//the resize event.var supportsOrientationChange = "onorientationchange" in window, orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";window.addEventListener(orientationEvent, function() { alert('HOLY ROTATING SCREENS BATMAN:' + window.orIEntation + " " + screen.width);}, false);
  • davidbcalhoun.com/2010/dealing-with-device-orIEntation

8 禁止webapp跳轉到safari（for iOS）

// Mobile Safari in standalone modeif (("standalone" in window.navigator) && window.navigator.standalone) { // If you want to prevent remote links in standalone web apps opening Mobile Safari, change 'remotes' to true var noddy, remotes = false; document.addEventListener('click', function(event) { noddy = event.target; //Bubble up until we hit link or top HTML element. Warning: BODY element is not compulsory so better to stop on HTML while (noddy.nodeName !== "A" && noddy.nodeName !== "Html") { noddy = noddy.parentNode; } if ('href' in noddy && noddy.href.indexOf('http') !== -1 && (noddy.href.indexOf(document.location.host) !== -1 || remotes)) { event.preventDefault(); document.location.href = noddy.href; } }, false);}

9 禁用手機號碼鏈接（for iOS）

<meta name="format-detection" content="telephone=no" />

10 阻止旋轉屏幕時自動調整字體大小

-webkit-text-size-adjust:none;

11 iOS中禁止用戶選中文字

-webkit-user-select:none;

12 iOS中如何禁止用戶保存圖片 復制圖片

-webkit-touch-calloutt:none;

13 語音輸入

<input type="text" x-webkit-speech />

14 文件上傳, 從相機捕獲媒體

<input type="file" accept = "image/*; capture=camera" /><input type="file" accept = "video/*; capture=camcorder" /><input type="file" accept = "audio/*; capture=microphone" />

15 電話短信

<a href="sms:18888886666,18888885555″]]> 發送短信給多個人 的鏈接<a href="sms:18888886666?body=sms txt"]]> 發送短信附帶內容 的鏈接<a href="tel:18888886666″]]>Call us at 18888886666</a]]> 撥打電話的鏈接
HTML5詳解
IBM演示下一代網絡技術 初試HTML5
最近，在舊金山市場街的辦公室裡，IBM軟件小組的新興技術副總裁Rod Smith和IBM艾曼登研發
Iconfont在移動端遇到問題的探討
Iconfont越來越得到前端的關注，特別是阿裡那個iconfont庫的推出和不斷完善，再加上連I
初學HTML5的二十二個基本技巧
1. 新的Doctype聲明XHtml的聲明太長了，我相信很少會有前端開發人員能手寫出這個Doct

相關文章

HTML入門知識HTML5教程關於HTMLHTML和XhtmlHTML5特效代碼HTML5詳解
小編推薦
CSS3 實現超炫的 Loading（加載）動畫效果 HTML5幾個設計和修改的頁面范例分享 淺談利用緩存來優化HTML5 Canvas程序的性能 使用HTML5的Canvas繪制曲線的簡單方法 添加動畫 Unicode – CSS中文字體轉編碼 突襲HTML5之Javascript API擴展4―拖拽(Drag/Drop)概述 9款HTML5實現的超酷特效 代碼的美感 html5的websockets全雙工通信詳解學習示例
熱門推薦
曲線背景圖片的使用方法 HTML5之HTML元素擴展(下)―增強的Form表單元素值得關注 程序設計HTML5 Canvas API html5 web socket 深入了解 HTML 5 HTML5新特性 利用html5 canvas破解簡單驗證碼及getImageData接口應用 詳解HTML5中download屬性的應用 html5關於動畫在手機中的屏幕適配
大家都在看
深入了解CSS的繼承性及其應用2 jquery 獲取自定義屬性(attr和prop)的實現代碼 css border 虛線樣式 邊框兼容浏覽器的虛線 談談關於JavaScript 中的 MVC 模式 AJAX +SpringMVC 實現bootstrap模態框的分頁查詢功能 JS獲取文本框,下拉框,單選框的值的簡單實例 jQuery模擬黑客帝國矩陣效果實例 js 刪除數組的幾種方法小結
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved