移动平台前端开发总结（ios，Android）

首先我们来看看webkit内核中的一些私有的meta标签，这些meta标签在开发webapp时起到非常重要的作用

<meta content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0" name="viewport" /> 强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览；尤其要注意的是content里多个属性的设置一定要用分号+空格来隔开，如果不规范将不会起作用。

<meta content="yes" name="apple-mobile-web-app-capable" /> iphone设备中的safari私有meta标签，它表示：允许全屏模式浏览

<meta content="black" name="apple-mobile-web-app-status-bar-style" /> iphone的私有标签，它指定的iphone中safari顶端的状态条的样式 <meta content="telephone=no" name="format-detection" /> 告诉设备忽略将页面中的数字识别为电话号码

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.顶部状态栏背景色

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

11.桌面图标

<link rel="apple-touch-icon"href="touch-icon-iphone.png"/> <link rel="apple-touch-icon"sizes="76x76"href="touch-icon-ipad.png"/> <link rel="apple-touch-icon"sizes="120x120"href="touch-icon-iphone-retina.png"/> <link rel="apple-touch-icon"sizes="152x152"href="touch-icon-ipad-retina.png"/>

12.移动端 HTML5 audio autoplay 失效问题

document.addEventListener('touchstart',function() { document.getElementsByTagName('audio')[0].play(); document.getElementsByTagName('audio')[0].pause(); });

13.js处理img标签加载图片失败，显示默认图片

　　如果img标签是少量的话，可以用这个： img的onerror事件

　　<img src='test.jpg' alt='test' onerror="this.src='default.jpg'">

14.CSS 强制不换行，多出的文字显示省略号

{ white-space: nowrap; //文本强制不换行； text-overflow:ellipsis; //文本溢出显示省略号； overflow:hidden; //溢出的部分隐藏； }