移动开发之总结

标签: 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>


相关 [移动 开发] 推荐:

移动开发那些事

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

移动开发之总结

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

2011 移动平台开发现状

- 山河之外 - 互联网的那点事...
Visionmobile 根据“2011 开发者经济调查报告”(点击这里下载该报告)中的数据制作了一幅信息图,使我们可以一览手机各平台的开发现状. 这幅信息图关注的的手机平台有 Android,黑莓,iOS(iPhone),Java ME,Mobile web,Symbian,Windows Phone.

jQuery Mobile开发HTML5移动应用

- - HTML5研究小组
随着移动互联世界的到来,目前已发展到多种移动 操作系统割据的局面,而开发者则急需要能运用原有的开发知识和技能,快速方便地构建移动应用程序,并期望能运行在不同的 手机操作平台上,比如Android,iOS,黑莓等. 而目前,出现了一批十分优秀的支持HTML5/CSS3的移动应用开发框架,其中最为大家熟悉的是jQuery Mobile框架(http:// jquerymobile.com),它可以让熟悉jQuery框架的开发者快速开发出基于HTML5的移动应用,而且直接通过 手机的浏览器即可浏览.

移动应用开发小贴士

- - ITeye资讯频道
严格说来本文是针对iOS应用进行介绍的——在未来一段时间内iOS应用开发无疑仍会是热门,因此,不管是对开发者还是企业管理人员来说,或多或少了解一些应用开发流程十分必要——不过本文涉及的大部分内容其实并不局限于iOS应用,同时也适用Android、Windows Mobile和Blackberry等其他移动平台.

移动开发框架:Ionic Framework

- - 标点符
Ionic是 Drifty继 Codiqa(基于 Web 的 jQuery Mobile构建工具)和 Jetstrap(基于 Web 的 Twitter Bootstrap 构建工具)之后的第三个项目. 是一个用HTML, CSS 跟JS 开发的一个用于移动设备Web App 开发框架,采用Sass与AngularJS 开发.

移动终端开发必备知识

- - 博客 - 伯乐在线
移动设备的用户越来越多,每天android手机的激活量都已经超过130万台,所以我们面向移动终端的WebAPP也开始跟进了. 本文主要介绍webapp的开发与调试的相关知识和经验,以及给出几种可选的解决方案. (1) CSS pixels与device pixels. CSS pixels: 浏览器使用的抽象单位, 主要用来在网页上绘制内容.

移动开发规范概述

- - Jing
iOS 4.0+ 使用英文字体 Helvetica Neue,之前的iOS版本降级使用 Helvetica. 中文字体设置为华文黑体STHeiTi. 需补充说明,华文黑体并不存在iOS的字体库中( http://support.apple.com/kb/HT5484?viewlocale=en_US), 但系统会自动将华文黑体STHeiTi兼容命中系统默认中文字体黑体-简或黑体-繁.

移动端web app开发备忘

- - CSDN博客Web前端推荐文章
最近要做个手机html5的页面,做些知识储备,重要的点记录下来以备后续. 1.devicePixelRatio:定义设备物理象素和设备独立象素的比例. css中的px可以看作是设备的独立象素,通过devicePixelRatio,就可以知道设备上的一个css像素代表着多少个物理像素,可以考虑devicePixelRatio+rem进行不同设备间的适配;.