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