移动平台前端开发总结

你的名字 2023-07-10 15:40 40阅读 0赞

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

首先我们来看看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”); \}

\});

1.  input 的placeholder会出现文本位置偏上的情况：

PC端设置line-height等于height能够对齐，而移动端仍然是偏上，解决是设置line-height：normal;

1.  在移动端修改难看的点击的高亮效果，iOS和安卓下都有效：

\*\{-webkit-tap-highlight-color:rgba(0,0,0,0);\}

1.  Zepto点透的解决方案

(1)引入fastclick.js，在页面中加入如下js代码

window.addEventListener( “load”, function() \{ FastClick.attach( document.body ); \}, false );

1.  上下拉动滚动条时卡顿、慢

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; \}

1.  iphone及ipad下输入框默认内阴影

Element\{ -webkit-appearance:none; \}

1.  ios和android下触摸元素时出现半透明灰色遮罩

Element \{ -webkit-tap-highlight-color:rgba(255,255,255,0) \}

1.  圆角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; //溢出的部分隐藏； \}