移动端WEB开发代码片段

浏览数：38 / 时间：2015年06月11日

WebApp是指基于Web的系统和应用，其作用是向广大的最终用户发布一组复杂的内容和功能（不明白说的是什么）。其实Web APP就是一个针对Iphone、Android等智能手机优化后的web站点，它使用的技术无非就是HTML或HTML5、CSS3、JavaScript，服务端技术JAVA、PHP等（这下明白了）。再直白点说就是针对智能手机上的网站开发，只不过优于我们常说的WAP。我从上半年开始接触移动端WEB APP，前前后后摸索，求索，探索（在此，感谢Kevin的补课），也做了一些项目，现在在这里把过去遇到的或者其他大牛们整理的一些代码做个系统的整理。

一、关于Meta

1、IOS

以下这些Meta主要或者全部作用于IOS系统，代码里做了详细注释

1| <meta name="apple-mobile-web-app-capable" content="yes">
2| <meta name="apple-touch-fullscreen" content="yes">
3| <meta name="apple-mobile-web-app-status-bar-style" content="black">
/*
 * 1、2条的作用是删除IOS默认的工具栏和菜单栏并且全屏显示，这个请配合第4、5条理解。
 * 第3条的作用是改变状态栏样式，默认值为default（白色）
 * 可选项为black（黑色）和black-translucent（灰色半透明）
**/
4| <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=0, maximum-scale=1.0">
5| <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=0, maximum-scale=1.0, minimal-ui">
/*
 * 对比一下，第4条就比第5条少了个minimal-ui
 * initial-scale 初始的缩放比例
 * minimum-scale 允许用户缩放到的最小比例
 * maximum-scale 允许用户缩放到的最大比例
 * user-scalable 用户是否可以手动缩放
 * minimal-ui    iOS7.1移动端Safari浏览器不显示地址栏和工具栏
 * 综上：viewport标记是用来控制屏幕缩放的
**/
6| <link rel="apple-touch-icon" href="图标地址">
/*
 * 设置web app的放置主屏幕上icon文件路径。
 * 图片尺寸可以设定为57*57PX(iPhone) | 114*114PX(Retina) | 72*72PX(iPad)
**/
6| <link rel="apple-touch-icon" href="图标地址">
/*
 * 设置web app的放置主屏幕上icon文件路径。
 * 图片尺寸可以设定为57*57PX(iPhone) | 114*114PX(Retina) | 72*72PX(iPad)
**/
7| <link href="" media="(device-width: 320px)" rel="apple-touch-startup-image">
/*
 * 启动画面图像(media相关不做介绍)
**/

分析以上代码，尤其是把1,3,5,6条综合起来，在桌面创建一个图标，让网页内容以应用程序风格显示，并使状态栏透明，你的WEB APP成了一个高仿APP了吗？：）

2、其他

8| <meta name="format-detection" content="telephone=no">
9| <meta name="format-detection" content="email=no">
/*
 * 第8条：禁止将数字当做电话号码
 * 第9条：禁止将邮箱变为可以点击
**/

二、发短信、打电话

1| <a href="http://www.smohan.net" sms:手机号,手机号″> 群发短信 </a>
 发送短信给多个人的链接
2| <a href="sms:手机号?body=">  发短信 </a>
 发送短信附带内容的链接
3| <a href="tel:18888886666"> Call us at 18888886666 </a>
 拨打电话的链接

三、前端控制“功能”

htmlpop-up

   阻止旋转屏幕时自动调整字体大小
1| html{-webkit-text-size-adjust:none;}
   禁止用户选中文字
2| html{-webkit-user-select:none;}
   禁止用户保存图片 复制图片
3| body{-webkit-touch-calloutt:none;}
   文本框语音输入
4| <input type="text" x-webkit-speech/>
   文件上传，捕获媒体
5| <input type="file" accept = "image/*; capture=camera" />
   <input type="file" accept = "video/*; capture=camcorder" / >
   <input type="file" accept = "audio/*; capture=microphone" />

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

移动端WEB开发代码片段