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

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

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; //溢出的部分隐藏； }

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

猜你喜欢