移动web开发经验总结(转)

1.<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, width=device-width">width可是宽度，initial-scale初始化缩放比例，maximum-scale允许用户缩放的最大比例，minimum-scale允许用户缩放的最小比例，user-scalable是否允许用户缩放。

2.-webkit-tap-highlight-color:rgba(255,255,255,0)可以同时屏蔽ios点击元素时出现的阴影。

3.-webkit-appearance:none可以同时屏蔽输入框怪异的内阴影。

4.-webkit-transform:translate3d(0, 0, 0)在ios下可以让动画更加流畅（这个属性会调用硬件加速模式），但是在android下不可乱用，会产生很多见所未见的bug。

[email protected]可以预定义很多你所想到的动画，然后通过-webkit-transition来调用。

6.-webkit-background-size可以做高清图标，不过一些低版本的android只能识别background-size，所以有必要两个都要写上；用这个属性的时候推荐树勇cover这个值，可以自动去匹配宽和高。

7.多用text-shadow这个属性，可以美化文字效果, border-radius、box-shadow、gradient、border-image，在移动端都可以很好的支持，使用这些属性可以实现很炫丽的按钮。

8.android、ios4及以下，固定宽/高块级元素的overflow:scroll/auto失效，属于浏览器的bug，可借助第三方工具(iScroll)实现。

10.ios5+可以通过scrollTo(0,0)来自动隐藏浏览器地址栏。

11.css3动画会影响你的自动聚焦，所以自动聚焦要在动画执行之前来做，或者直接舍弃。

12.input框会默认呼出，如果想隐藏键盘让其失焦即可。

13.当用iScroll时候，不能使用:focus{outline:0}伪类，否则滑动会卡。

14.使用iScroll的时候，在部分手机(部分小米、三星机型)中click会执行两次，是因为iscroll在判断滑动前,阻止了click 事件,然后在滑动后,对原来的click事件进行了重构，在一些设备上并没有将默认的click阻止掉。所以，出现了类似双击的现象。

解决方案：

//1.自己写一个fn-->myclick，然后onclick="myclick();"调用。

var t1 = null;//这个设置为全局

function myclick(){

if (t1 == null){

t1 = new Date().getTime();

}else{

var t2 = new Date().getTime();

if(t2 - t1 < 500){

t1 = t2;

return;

}else{

t1 = t2;

}

/*自己的代码*/

}

//2.上面的代码，也可以写在iscroll.js（4.2.5）的_end方法中，要注意var t1是全局的

//3.国外论坛在iscroll.js(4.2.5)对应位置添加

topOffset: 0,

checkDOMChanges: false, // Experimental

handleClick: true,

preventGhostClick: false, // prevent ghost clicks?防止2次点击

ghostClickTimeout: 500, // timeout for ghost click prevention设置时间差

/**

* Prevents any real clicks.

* See preventGhostClick portion of _end().

*/

_preventRealClick: function(e) {

if (e._fake !== true) {

e.preventDefault();

e.stopPropagation();

e.stopImmediatePropagation();

e.cancel = true;

return false;

}

},

_end: function (e) {......

ev._fake = true;

if (that.options.preventGhostClick) { //preventGhostClick: true,

// prevent ghost real clicks on body

document.body.addEventListener(‘click‘, that._preventRealClick, true);

// until ghost click timeout expires

setTimeout(function () {

document.body.removeEventListener(‘click‘, that._preventRealClick, true);

}, that.options.ghostClickTimeout);

}

target.dispatchEvent(ev);

//4.使用zepto的tap替换click

15.iOS中禁止用户保存图片、复制图片，img标签指定-webkit-touch-callout为none可以禁止设备弹出列表按钮，这样用户就无法保存/复制你的图片。

16.使用-webkit-user-select: none; 禁止用户进行复制, 选择。

转载来自:http://www.cnblogs.com/ppforever/p/4878482.html

时间： 2024-10-13 02:59:44

移动web开发经验总结(转)

移动web开发经验总结(转)的相关文章

[转]移动web开发经验总结

web开发经验——富头像上传编辑器的使用

在智能电视中的实时数据呈现web开发经验分享

手机版WEB开发经验分享,手机版网站开发注意事项,网站自适应,手机版网站自适应,移动安卓APP自适应

web开发经验—MVC 图表Chart

移动web开发经验总结(1)

移动web开发经验总结

【转载】移动web开发经验总结

Web应用开发工具及语言需要具备的功能探索 - partial