WebApp开发概要
2016-05-12 本文已影响85人
光明享心
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="apple-mobile-web-app-title" content="标题">
//添加到主屏后的标题
<meta http-equiv="Cache-Control" content="no-siteapp" />
//百度禁止转码
<meta name="apple-mobile-web-app-capable" content="yes" />
//隐藏地址栏如果要显示的话可以不添加
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
//在启动webapp的时候可以使用这个控制，black--黑色，default--白色，black-translucent--半透明
<meta name="format-detection" content="telephone=no" />
<meta name="format-detection" content="email=no" />
<meta name="format-detection" content="telphone=no, email=no" />
//上面三个表示忽略页面中的识别为电话号码和邮箱，第三个为缩写这个是在页面中有类似电话的数组的时候进行忽略处理的
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
// 优先使用最新版本 IE 和 Chrome
<meta name="msapplication-tap-highlight" content="no">
//清除winphone中a标签点击后出现灰色背景
<title>手机端web开发</title>
<style type="text/css" media="screen">
.css{-webkit-appearance:none;}
//清除webkit表单默认样式
input::-webkit-input-placeholder{color:#AAAAAA;}
input:focus::-webkit-input-placeholder{color:#EEEEEE;}
//webkit表单输入框placeholder默认颜色调整，另外placeholder在IOS中可以换行，但是在android不行
input,textarea { border: 0; /* 方法1 */-webkit-appearance: none; /* 方法2 */}
//在IOS中输入框会有内阴影，可以使用上面的方式清除，注意border-redius是不管用滴
</style>
<link href="short_cut_114x114.png" rel="apple-touch-icon-precomposed">
<link href="short_cut_114x114.png" rel="apple-touch-icon">
//指定web app添加到主屏后的图标路径，有两种略微不同的方式。第一种是设计原稿，第二种会添加高光效果（IOS6）
</head>
<body>
<a href="tel:123456">123456</a>
//开启电话功能
<a href="sms:123456">123456</a>
//开启短信功能
<a href="mailto:dooyoe@gmail.com">dooyoe@gmail.com</a>
//开启邮箱功能（安卓）
<input type=file accept="image/*" capture="camera">
<input type=file accept="video/*" capture="camcorder">
<input type="file" accept="audio/*" capture="microphone" >
//上面两个是手机上的上传文件，第一个是图片第二个是视频，第三个是录音功能，可以使用**accept**操作，上面的第二个属性是capture，这个是直接调用摄像头或者话筒的，如果是调取图片而不是拍照的话可以省略。`注意兼容问题以及样式问题`
<input type="text" autocapitalize="off" />
//默认关闭IOS中的首字母大写
<input type="text" autocorrect="off" />
//关闭iOS输入自动修正
<input type="search" />
//放在form里面可以将软件盘的换行键转换为回车键。
</body>
</html>
内容比较零散，大部分可以直接拉入文件中使用，使用时请注意检查是否正确，如果错误希望留言以便修改。
在开发移动站点的时候我试过了使用vw，vh。vh就像网上大部分地方所说的在安卓手机中会识别软键盘，如果使用的话会出现变形现象，所以后期我调整了一下继续使用rem进行设置，不过在页面横版分块的时候使用的还是vw（或者使用%）。这个方式类似于阿里开发淘宝移动站的方式，不同的是淘宝会根据手机型号以及尺寸不同更改data-dpr的值，而这个不会，但是相对的使用起来更加简单。
!function(win) {
function resize() {
var domWidth = domEle.getBoundingClientRect().width;
if(domWidth / v > 540){
domWidth = 540 * v;
}
win.rem = domWidth / 16;
domEle.style.fontSize = win.rem + "px";
}
var v, initial_scale, timeCode, dom = win.document, domEle = dom.documentElement, viewport = dom.querySelector('meta[name="viewport"]'), flexible = dom.querySelector('meta[name="flexible"]');
if (viewport) {
var o = viewport.getAttribute("content").match(/initial\-scale=(["']?)([\d\.]+)\1?/);
if(o){
initial_scale = parseFloat(o[2]);
v = parseInt(1 / initial_scale);
}
} else if(flexible) {
var o = flexible.getAttribute("content").match(/initial\-dpr=(["']?)([\d\.]+)\1?/);
if (o) {
v = parseFloat(o[2]);
initial_scale = parseFloat((1 / v).toFixed(2))
}
}
if (!v && !initial_scale) {
var n = (win.navigator.appVersion.match(/android/gi), win.navigator.appVersion.match(/iphone/gi));
v = win.devicePixelRatio;
v = n ? v >= 3 ? 3 : v >= 2 ? 2 : 1 : 1, initial_scale = 1 / v
}
//没有viewport标签的情况下
if (domEle.setAttribute("data-dpr", v), !viewport) {
if (viewport = dom.createElement("meta"), viewport.setAttribute("name", "viewport"), viewport.setAttribute("content", "initial-scale=" + initial_scale + ", maximum-scale=" + initial_scale + ", minimum-scale=" + initial_scale + ", user-scalable=no"), domEle.firstElementChild) {
domEle.firstElementChild.appendChild(viewport)
} else {
var m = dom.createElement("div");
m.appendChild(viewport), dom.write(m.innerHTML)
}
}
win.dpr = v;
win.addEventListener("resize", function() {
clearTimeout(timeCode), timeCode = setTimeout(resize, 300)
}, false);
win.addEventListener("pageshow", function(b) {
b.persisted && (clearTimeout(timeCode), timeCode = setTimeout(resize, 300))
}, false);
resize();
}(window);
以上代码也是相应式的方式，与与阿里类似，不过少了对data-dpr的设置。只修改根font-size的大小。
注意：rem比例值为40px。
http://www.jianshu.com/p/cef8a4c6881f
以上为基础rem文件。
