微信号:cjscwe_2015

介绍:分享 学习 交流 原创 分享是学习的开始;学习不必要从头开始,是从现在开始;交流能沟通你我,提高你的学识;期待你的加入!!! web前端技术交流,JavaScript,HTML5,CSS3……

移动webapp

2015-05-13 09:37 前端JavaScript

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

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-->
<linkhref="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 全屏Makingit full-screen forios更像本地App

<metaname="apple-mobile-web-app-capable"content="yes"/>

4 改变状态栏Changing the phone status bar, for ios

content属性default, black and black-translucent

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

5 阻止缩放Preventing scaling

<metaname="viewport"content="user-scalable=no, width=device-width"/>

6 阻止弹性滚动(Preventing elastic scrolling

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

7 检测屏幕是否旋转(Detect whether devicesupports 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跳转到safarifor 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

<metaname="format-detection"content="telephone=no"/>

10 阻止旋转屏幕时自动调整字体大小

-webkit-text-size-adjust:none;

11IOS中禁止用户选中文字

-webkit-user-select:none;

12iOS中如何禁止用户保存图片复制图片

-webkit-touch-calloutt:none;

13 语音输入

<inputtype="text"x-webkit-speech/>

14 文件上传, 从相机捕获媒体

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

15 电话短信

<ahref="sms:18888886666,18888885555″]]>发送短信给多个人的链接
<ahref="sms:18888886666?body=sms txt"]]>发送短信附带内容的链接
<ahref="tel:18888886666″]]>Call us at 18888886666</a]]>拨打电话的链接


 
前端JavaScript 更多文章 自信,人生的支点 也谈基于NodeJS的全栈式开发 JavaScript 解析 JSON 数据 为什么原型继承很重要 预解析
猜您喜欢 HTML5之WebSocket协议 2015年JavaScript开发者调查报告:PHP是最好的编程语言! 有种速度让你望尘莫及 | 手机QQ及Qzone速度优化实践 负面情绪又不能吃,你要那么多有什么用? 数据可视化之——REmap