移动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是否允许用户缩放。

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。

5.@-webkit-keyframes可以预定义很多你所想到的动画,然后通过-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-03 20:42:29

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

云计算-没有web开发经验,要学flask,怎么办

问题描述 没有web开发经验,要学flask,怎么办 新找了一个工作,公司让我回家看看flask,但我之前没有任何web经验. 现在我学过的有python,http协议,html,之前一直在学算法,linux,socket这些比较底层的东西. 所以一下子面对一堆没听过的术语,jinja2,bootstrap,,,凌乱了,请教一下应该哪里切入好.是不是缺了哪方面的知识?或者介绍看看哪方面的书好? 在线等 解决方案 flask是一个web框架,比较容易快速上手,基本看看Flask的例子就可以做了 解

3年Java Web开发经验,上海工资多少?

问题描述 工作3年了,一直在郑州,现在在郑州至少能拿3500,在上个公司的研发部(7-8个人)是核心成员(项目组长,编写核心代码),辞职的时候,部门经理跟我说在郑州低于4000的不要去.自我评价:自学能力.悟性(开发.业务)很不错:在项目组中经常解决一些很棘手的问题:有一点项目管理的经验:Java基础一般(想今年好好补补):设计模式(懂一点,没抓过):算法和数据结构(基本不懂). 解决方案 本帖最后由 lpluck08 于 2011-04-17 08:41:26 编辑解决方案二:帖子发的有点早?

总结Flash建站经验:浅谈flash web的结构

web 引言 记得我刚接触FLASH那会儿,应该是FLASH6末期吧,国内的flash web还是很少的,牛X的更是屈指可数,而且这个时候所谓的牛X,一般都是指效果很酷,技术强的基本没有.其实这是必然,国内早期的flash web开发者大都是由FLASH动画制作者或是网页设计师转变而来.他们非常热衷于片头和过渡效果,为此不惜牺牲浏览者的等待时间并吃掉浏览者的CPU.这就是为什么现在好多人一谈起flash web就觉得它体积大,效率低的根源了.当然如果是真对个人网站,这也无可厚非,个人网站信息量小

使用Grails与jQuery创建Web Calendar

本文所面向的读者 本文读者应该需要具有一定的 Web开发经验,并对于 css. Ajax.Groovy 等技术,以及 Grails.jQuery 相关框架有一定的了解. Grails,jQuery,jQuery Plugin 介绍 Grails 是一套用于快速 Web 应用开发的开 源框架,它基于 Groovy 编程语言,并构建于 Spring.Hibernate 和其它标准 Java 框架之 上,从而为大家带来一套能实现超高生产力的一站式框架. jQuery 是一个 JavaScript 库,

关于web应用程序安全的思考(序)

曾经在一家公司短暂的几天工作中有过这样的经历.上班的第一天﹐同组做web的一位同事帮我开了一 个账号﹐要我上公司的管理系统看一下公司的规章制度. 百无聊赖的看完后﹐随便点了一下左边的"员工基本信息查询"菜单﹐页面的数据显示区域 显示"您无权限查看此页"﹐本想退出﹐但发现页面的查询条件输入区域存在﹐而且查询按钮只 是灰掉而已﹐在查看原始码后﹐抱着试一下的心态﹐我在浏览器的地址栏输入一句js脚本 (javascript:alert(document.all['query

给Java新手的一些建议----Java知识点归纳(J2EE and Web 部分)

J2EE(Java2 Enterprise Edition) 刚出现时一般会用于开发企业内部的应用系统,特别是web应用,所以渐渐,有些人就会把J2EE和web模式画上了等号.但是其实 J2EE 里面并不仅仅是web,可以看到很多其中的规范都是通用的,目的是为了高效开发出健壮的服务企业业务模式的应用系统.J2EE中也是可以没有web界面的应用,而现在面向大众用户开发的网站往往也会使用到很多的J2EE的技术,所以J2EE和web开发的概念都是融合在了一起了. 我本人在JAVA开发刚入行的时候,也是

高薪聘请NET WEB架构师

问题描述 我是深圳一家猎头公司的,目前我公司有受汕头一家企业的委托帮其礼聘一位NETWEB架构师,工作地点在汕头,年薪8-10万左右具体根据个人能力来定加奖金,包食住,公司环境良好,以下是职位的详细要求:1.至少4年以上.NET开发经验,2年以上Web开发经验.2.精通3/N层架构,至少2年以上架构设计经验.3.对SqlServer相当熟悉.4.有处理大数据量(数千万级)和大并发量(5000人以上同时在线)的经验者优先.5.本科以上学历,英语良好.6.对.NET技术有浓厚的兴趣,为人积极乐观,敢

新书出版:Java Web开发技术大全——JSP+Servlet+Struts 2+Hibernate+Sp

本文为原创,如需转载,请注明作者和出处,谢谢! 作者:李宁 图书详细信息: ISBN:9787302195757 定价:79.8元 印次:1-1 装帧:平装 印刷日期:2009-4-23   图书简介: SSH是目前最流行的Java Web开发技术.本书通过对SSH中的各种技术循序渐进地讲解,使读者尽快掌握开发基于SSH的Web程序的方法.本书内 容包括Web客户端技术.JSP/Servlet技术.Struts 2(拦截器.类型转换.输入校验.上传和下载文件.Struts 2的各种标签.对 AJ

新书出版:Java Web开发技术大全——JSP+Servlet+Struts 2+Hibernate+Spring+Ajax (附源代码)

本文为原创,如需转载,请注明作者和出处,谢谢! 源代码下载 作者:李宁 图书详细信息: ISBN:9787302195757 定价:79.8元 印次:1-1 装帧:平装 印刷日期:2009-4-23 图书简介: SSH是目前最流行的Java Web开发技术.本书通过对SSH中的各种技术循序渐进地讲解,使读者尽快掌握开发基于SSH的Web程序的方法.本书内 容包括Web客户端技术.JSP/Servlet技术.Struts 2(拦截器.类型转换.输入校验.上传和下载文件.Struts 2的各种标签.