移動web app開發小貼士收藏有用

時間 2019-11-18

標籤移動 web app 開發貼士收藏有用欄目無線简体版

原文原文鏈接

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

/ /57 *57

啓動畫面圖像（Creating a splash screen， for ios）

<!!-- iPhone SPLASHSCREEN-->

<!link href="http://wlog.cn/html/"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-->

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

1	<meta name = "apple-mobile-web-app-capable" content = "yes" />

4 改變狀態欄（Changing the phone status bar, for ios）
content屬性default, black and black-translucent

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

5 阻止縮放（Preventing scaling）

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

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

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 ) ;

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

// Mobile Safari in standalone mode

if ( ( "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）

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

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

1	-webkit-text-size-adjust : none ;

11 IOS中禁止用戶選中文字

1	-webkit-user-select : none ;

12 iOS中如何禁止用戶保存圖片複製圖片

1	-webkit-touch-calloutt : none ;

13 語音輸入

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

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

15 電話短信

<a href = "http://wlog.cn/html/"sms :18888886666 ,18888885555″ ] ] > 發送短信給多我的的連接

<a href = "sms:18888886666?body=sms txt" ] ] > 發送短信附帶內容的連接

<a href ="tel :18888886666″ ] ] > Call us at 18888886666 </a]]>撥打電話的連接

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

移動web app開發小貼士 收藏有用

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

啓動畫面圖像 （Creating a splash screen， for ios）

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

4 改變狀態欄 （Changing the phone status bar, for ios）content屬性default, black and black-translucent

5 阻止縮放 （Preventing scaling）