初入移动端jq+html5
来源:互联网 发布:c语言怎么入门 编辑:程序博客网 时间:2024/06/06 04:53
刚接触移动端,记录一些小点
1、屏幕分辨率,1080P的概念,目前主流的640*960、640*1136(iPhone4和5)
2、设备分辨率:宽300~400;
3、设备像素比:window.devicePixelRatio,即屏幕分辨率/设备分辨率;目前流行的是2.
4,viewport
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, target-densityDpi=device-dpi">可以让网页的宽度自动适应手机屏幕的宽度。 其中: width=device-width :表示宽度是设备屏幕的宽度 initial-scale=1.0:表示初始的缩放比例 minimum-scale=0.5:表示最小的缩放比例 maximum-scale=2.0:表示最大的缩放比例 user-scalable=yes:表示用户是否可以调整缩放比例,target-densityDpi=device-dpi是针对安卓的,也是表示用户是否可以调整缩放比(貌似被废掉了)
5、移动端的touch对象。
$div.on('touchstart',function(ev){ var touch = ev.originalEvent.changedTouches[0]})比如:touch.pageY ...
6、canvas中的getImageDate,要在服务器下运行,因为url跨域了
7、适合移动端的字体设置。
body{ font-family:Tahoma,Arial,Roboto,"Droid Sans","Helvetica Neue","Droid Sans Fallback","Heiti SC",sans-self;}
8、监听animation事件,webkitAnimationIteration animationIteration(为了兼容)
$text1.css('animation','1s infinite flash linear');$text1.on('webkitAnimationIteration animationIteration',function(ev) { if (ev.originalEvent.elapsedTime == 3) { $text1.remove(); $text2.css('animation','1s infinite flash linear'); $('#beginEffect').on('touchstart',function() { $(this).remove(); $('#c1').trigger('touchstart') }) } })ev.originalEvent.elapsedTime 监听animation的执行次数,ev.originalEvent是转换为原生的event
9、transform,后写的先执行
10、当设置景深时, -webkit-perspective : 800; perspective : 800,先为元素设置宽高
11、检测transition的状态,是否结束。
$li.on('webkitTransitionEnd transitionEnd',function(ev) { //do something}
12、在写切屏效果时,
第一,建个开关,当第一次结束时,才能执行第二次,
第二,记得阻止默认的touchmove事件
$(document).on('touchmove',function(ev){ ev.preventDefault();})
0 0
- 初入移动端jq+html5
- 初入移动端的手忙脚乱【html5+jQuery Mobile】(一)
- jq移动端日历签到
- 初学HTML5、初入前端
- 移动端JQ插件hammer使用详解
- 移动端js+html5
- html5移动端开发
- HTML5移动端优化
- html5移动端日历
- JQ.Mobi:HTML5
- html5--jq淡入淡出
- HTML5-jQ-有缝轮播-事件
- HTML5-总结jq
- jq鼠标移动
- JEECG 移动端解决方案【HTML5】
- 移动端HTML5应用程序调试
- 移动端 HTML5开发工具
- html5移动端手势事件
- OC 循环引用
- iOS ——QuartzCore核心动画框架
- OpenCV笔记(二)
- Java并发编程系列之一:并发机制的底层原理
- iOS ——逐帧动画
- 初入移动端jq+html5
- 第八届中国R语言会议(上海会场)精彩演讲视频 《借助API快速搭建自然语言处理平台》
- Java集合中TreeSet的实现原理
- 97Interleaving String
- 打破应试教育的思想才是重生之路
- Tower周报以及打印
- EJB安全
- 全功能智能车之CCD ADC 触发DMA传输(第十四篇)
- 黑马程序员--eclipse和Object类(day08)