您的位置：首页 > 移动开发

web app开发

2015-06-29 09:09 471 查看

1 创建主屏幕图标 （Creating a home screen icon ，for ios）

 

 

1
2
3
4
5
6

//57*57

<link rel="apple-touch-icon"href="http://wlog.cn/html/"/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"
/>

 

启动画面图像 （Creating a splash screen， for ios）

 

 

1
2
3
4
5
6
7
8
9
10
11
12

<!!-- 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-->

<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" />

 

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）

 

 

1
2
3
4
5
6
7
8
9

<script>

functionBlockMove(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）

 

 

1
2
3
4
5
6
7

//Detect whether device supports orientationchange event, otherwise fall back to

//the resize event.
varsupportsOrientationChange="onorientationchange"inwindow,

    orientationEvent=supportsOrientationChange?"orientationchange":"resize";
window.addEventListener(orientationEvent,function(){

    alert('HOLY ROTATING SCREENS BATMAN:'+window.orientation+"
"+screen.width);
},false);

 

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

 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

// Mobile Safari in standalone mode

if(("standalone"inwindow.navigator)&&window.navigator.standalone){
        // If you want to prevent remote links in standalone web apps opening Mobile Safari, change 'remotes' to true

    varnoddy,
        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'innoddy&&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 文件上传, 从相机捕获媒体

 

 
 
 
 
 
XHTML

 

1
2
3

<input
type="file"accept="image/*; capture=camera"
/>

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

 

15 电话短信

 

 

1
2
3

<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 ios class dba desktop
相关文章推荐
新的分享
章节导航