移动开发之总结

标签: html5 css3 jquery | 发表时间:2015-01-22 06:13 | 作者:Mingdy
分享到:
出处:http://segmentfault.com/blogs

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就是因为这个。

4、@-webkit-keyframes可以预定义很多你所想到的动画,然后通过-webkit-transition来调用。

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

6、text-shadow多用这个属性,可以美化文字效果。

7、border-radius、box-shadow、gradient、border-image,不解释,可以精简代码。

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

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

10、width可是宽度,initial-scale初始化缩放比例,maximum-scale允许用户缩放的最大比例,minimum-scale允许用户缩放的最小比例,user-scalable是否允许用户缩放。
11、允许用户添加到主屏幕,并提供webapp的支持。

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

13、使用media query适配不同屏幕。

14、如果涉及较多域外链接,DNS Prefetching可以帮你做DNS预解析。

15、如果你希望你的站点更多地在SNS上传播,那么Open Graph Protocol会比较适合你。

16、当用iScroll时候,不能使用:focus{outline:0}伪类,否则滑动会卡。

17、-webkit-user-select: none; 禁止用户进行复制.选择。

========
lazyload.js 实现列表图片异步加载

  //先载入jquery
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
//再载入lazyload
<script type="text/javascript" src="http://www.jo2.org/js/jquery.lazyload.js"></script>



<script type="text/javascript">

jQuery(document).ready(

function($){

$("img").lazyload({

     placeholder : "异步图片加载地址", //加载图片前的占位图片

     effect : "fadeIn" //加载图片使用的效果(淡入)

});

});

</script>


相关 [移动 开发 总结] 推荐:

移动开发之总结

- - SegmentFault 最新的文章
1、-webkit-tap-highlight-color:rgba(255,255,255,0)可以同时屏蔽ios和android下点击元素时出现的阴影. 备注:transparent的属性值在android下无效. 2、-webkit-appearance:none可以同时屏蔽输入框怪异的内阴影.

在移动开发中常用的开源库总结

- - CSDN博客推荐文章
我个人觉得有以下几个原因:. 1>我们的项目比较赶,但是又用到一些比较复杂的模块,这些模块不是系统自带的,或者说系统自带的满足不了需求,同时在一些开源网站上面又有类似的或者是满足我哦们需求的开源项目和库,拿来就可以减少我们很多的工作量. 2>开源库从另外一方面来说就是为了提高代码的重用性,大家使用了这个开源库,然后提交一些bug,通过大家的力量完善这个开源项目.

kettle 开发总结

- - CSDN博客推荐文章
2.在用file exists 控件的时候,当用到“文本文件输入”时,文本文件中需要一定的格式,类似下图:. ;当然也可以已经创建了相应的表,然后直接按“确定”按钮就行,如果相应的表和输入的列数及列属性不一样时,也可以在sql按钮的语句中取修改. 在使用file exists时,输入也可以用表输入.

敏捷开发 Scrum 总结

- - 行业应用 - ITeye博客
  最近把之前学习 Scrum 的资料整理为一篇文档,在接下来的团队和项目开发中,根据项目的情况引入 Scrum 的一些实践,提高团队成员之间的协作能力和项目的交付质量.          参考资料:. 《轻松Scrum之旅—敏捷开发故事》、《敏捷无敌》.          Scrum 工具.

移动端跨平台技术总结

- - CSDN博客推荐文章
曾经大家以为在手机上可以像桌面那样通过 Web 技术来实现跨平台开发,却因为性能或其他问题而放弃,不得不针对不同平台开发多个版本. 而React Native让跨平台移动端开发在次回到人们的视野中,其成功的原因除了他“一次编写处处运行”,还因为它相比h5等前端技术,有了更接近原生的体验. 为了方便理解,笔者将跨平台技术分为4大流派:.

webkit webApp 开发技术要点总结

- - ITeye博客
如果你是一名前端er,又想在移动设备上开发出自己的应用,那怎么实现呢. 幸好,webkit内核的浏览器能帮助我们完成这一切. 接触 webkit webApp的开发已经有一段时间了,现把一些技巧分享给大家 :. 对于桌面浏览器,我们都很清楚viewport是什么,就是出去了所有工具栏、状态栏、滚动条等等之后用于看网页的区域,.

web app开发技巧总结 (share)

- - 移动开发 - ITeye博客
web app开发技巧总结 (share).   (转自http://hi.baidu.com/kuntakinte/item/ca92d6e5edae9fc0bbf37d08). 自Iphone和Android这两个牛逼的手机操作系统发布以来,在互联网界从此就多了一个新的名词-WebApp(意为基于WEB形式的应用程序,运行在高端的移动终端设备).

thrift总结 - 跨语言服务开发

- - 企业架构 - ITeye博客
IBM-Apache Thrift - 可伸缩的跨语言服务开发框架. Thrift入门及Java实例演示. Thrift是一个软件框架,用来进行 可扩展且跨语言的服务的开发. thrift允许你定义一个简单的定义文件中的数据类型和服务接口. 以作为输入文件,编译器生成代码用来方便地生成RPC客户端和服务器通信的无缝跨编程语言.

移动开发那些事

- - 微博UDC
说实话,我们这次开发移动端的项目,整个项目组的人都是第一次,最初立项的时候为是选择native app和web app还争论了一番,最后综合考虑,我们选择了web(我们选择了h5)开发. 但从这两种开发模式的特点来说,从它们诞生之日起就开始了不断的争论,孰好孰坏,本文不作探讨,只是简单罗列下本人开发遇到的问题和最终的解决方案.

移动应用可用性测试的实践经验总结

- - 互联网的一些事-关注互联网产品管理,交流产品设计、用户体验心得
  如果你不大熟悉移动应用的可用性测试,没关系,这事儿没你想象的那么困难;不过移动应用与传统网站产品在可用性测试方面确实有一些关键的区别需要我们注意.   过去的几年当中,我(英文原文作者)为不少移动产品做过测试,从戒烟应用到移动版的车辆保险网站,其中既包括在实验室使用复杂设备进行的测试,也包括在各种实境化的条件下进行的非正式测试.