首先我们来看看webkit内核中的一些私有的meta标签，这些meta标签在开发webapp时起到非常重要的作用
强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览；尤其要注意的是content里多个属性的设置一定要用分号+空格来隔开，如果不规范将不会起作用。
iphone设备中的safari私有meta标签，它表示：允许全屏模式浏览
iphone的私有标签，它指定的iphone中safari顶端的状态条的样式 告诉设备忽略将页面中的数字识别为电话号码
1. h5页面有个很蛋疼的问题就是，当输入框在最底部，点击软键盘后输入框会被遮挡。
//可采用如下方式解决
var oHeight = $(document).height(); //浏览器当前的高度
$(window).resize(function(){
if($(document).height() < oHeight){ $("#footer").css("position","static"); }else{ $("#footer").css("position","absolute"); }
});
2. input 的placeholder会出现文本位置偏上的情况：
PC端设置line-height等于height能够对齐，而移动端仍然是偏上，解决是设置line-height：normal;
3. 在移动端修改难看的点击的高亮效果，iOS和安卓下都有效：
*{-webkit-tap-highlight-color:rgba(0,0,0,0);}
4. Zepto点透的解决方案
(1)引入fastclick.js，在页面中加入如下js代码
window.addEventListener( "load", function() { FastClick.attach( document.body ); }, false );
5. 上下拉动滚动条时卡顿、慢
body { -webkit-overflow-scrolling:touch; overflow-scrolling: touch; }
6.禁止复制、选中文本
Element { -webkit-user-select:none; -moz-user-select:none; -khtml-user-select:none; user-select:none; }
7. iphone及ipad下输入框默认内阴影
Element{ -webkit-appearance:none; }
8. ios和android下触摸元素时出现半透明灰色遮罩
Element { -webkit-tap-highlight-color:rgba(255,255,255,0) }
9. 圆角bug
某些Android手机圆角失效
解决方案：background-clip: padding-box;
10.顶部状态栏背景色
11.桌面图标
12.移动端 HTML5 audio autoplay 失效问题
document.addEventListener('touchstart',function() { document.getElementsByTagName('audio')[0].play(); document.getElementsByTagName('audio')[0].pause(); });
13.js处理img标签加载图片失败，显示默认图片
如果img标签是少量的话，可以用这个： img的onerror事件
14.CSS 强制不换行，多出的文字显示省略号
{ white-space: nowrap; //文本强制不换行； text-overflow:ellipsis; //文本溢出显示省略号； overflow:hidden; //溢出的部分隐藏； }