移动web app开发HTML/CSS等小贴士代码 收藏有用【转载】

1 创建主屏幕图标 (Creating a home screen icon ,for ios)


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

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


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


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


5、阻止缩放 (Preventing scaling)


<meta name="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>
<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.
varsupportsOrientationChange="onorientationchange"inwindow,
    orientationEvent=supportsOrientationChange?"orientationchange":"resize";
window.addEventListener(orientationEvent,function(){
    alert('HOLY ROTATING SCREENS BATMAN:'+window.orientation+" "+screen.width);
},false);

9 禁用手机号码链接(for ios)

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

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

11 IOS中禁止用户选中文字

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

13 语音输入

 

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]]>拨打电话的链接






关键词: 移动开发

上一篇: python学习随手记:python读取JSON文件
下一篇: CentOS 6.5系统上编译安装PostgreSQL 9.3数据库

目前还没有人评论,您发表点看法?
发表评论

评论内容 (必填):