移动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

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

//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-08-07 21:17:52

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

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

1.-webkit-tap-highlight-color:rgba(255,255,255,0)可以同时屏蔽ios和android下点击元素时出现的阴影. 备注:transparent的属性值在android下无效. 2.-webkit-appearance:none可以同时屏蔽输入框怪异的内阴影. 3.-webkit-transform:translate3d(0, 0, 0)在ios下可以让动画更加流畅(这个属性会调用硬件加速模式),但是在android下不可乱用,很多见所未见的bug就是

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

富头像编辑器是一个很好的头像图片上传控件,能够对图片进行简单的处理,例如:剪切.调节亮度等功能:富头像编辑器拥有很的参数配置,可根据自己的需要配置控件的功能:该控件要求浏览器需安装Flash Player后才能使用:下面是我做的一个小的Demo以说明富头像编辑器的使用方法. 1.前台页面 需引用js文件和初始化富头像编辑器,脚本代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /

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

先上图,一睹为快. 看到图,身为资源web开发者的你,是不是在大脑中闪现出了一个个的技术名词,websocket.html5.css3(animation/transition).javascript(ajax/setTimeout/setInterval). 同样专注web开发xx年的你,有没有考虑到以下问题: 1.实时数据展现,如果采用ajax定时拉取对现有业务的影响,在DB性能这块,可能导致DB服务死去 2.采用客户端主动拉取还是服务器端的推技术,服务器推技术似乎实现起来太多麻烦,后端的配

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

转自 http://my.oschina.net/cart/blog/282477 做前端开发不短了,用过jQuery Mobile jqMobi 也纯手工写过.. 最后总结如下: jQuery Mobile:适合大而全,兼容性高,功能全,但是文件大,略显臃肿..如果你是网页版.手机版共用jquery库等 适合使用jQuery Mobile. jqMobi:适合单独就是手机版的站,体积小,速度快,但是兼容性没有jQuery Mobile好,功能没有jQuery Mobile全,但是一般也够用啦.

web开发经验—MVC 图表Chart

Mvc  Chart 是一个使用起来非常方便的控件,可以自定义参数,能呈现给用户很漂亮的各种统计图表;使用此图表首先要导入命名空间:System.Web.UI.DataVisualization.Charting 此dll在vs自带的里面,它的位置: C:\Program Files\Reference Assemblies\Microsoft\Framework\.NETFramework\v4.0\System.Web.DataVisualization.dll 效果图如下: 由于mvc 返

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

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是否允许用户缩

移动web开发经验总结

1.-webkit-tap-highlight-color:rgba(255,255,255,0)可以同时屏蔽ios和android下点击元素时出现的阴影. 备注:transparent的属性值在android下无效. 2.-webkit-appearance:none可以同时屏蔽输入框怪异的内阴影. 3.-webkit-transform:translate3d(0, 0, 0)在ios下可以让动画更加流畅(这个属性会调用硬件加速模式),但是在android下不可乱用,很多见所未见的bug就是

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

本文出自: http://blog.163.com/hsb001_mobile/blog/static/15524028020111177221254/ 1.-webkit-tap-highlight-color:rgba(255,255,255,0)可以同时屏蔽ios和android下点击元素时出现的阴影. 备注:transparent的属性值在android下无效. 2.-webkit-appearance:none可以同时屏蔽输入框怪异的内阴影. 3.-webkit-transform:t

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

1 前言 最近一个多月在做Web项目,用到的技术有(也不算泄漏公司机密吧): 后台:Struts 2(with JSP/FreeMarker).Spring.Hibernate.MySQL.Web Service(only dubbo interface): 前台:jQuery series: Web服务器:tomcat. 虽然比较厌恶被别人称为做Java Web的,但没有做过的事情还是有挑战性的,一周内几乎天天加班足可以我的态度. 好像有成就感的计算机硕士应该觉得这些活儿是些"平凡"