码迷,mamicode.com
首页 > 移动开发 > 详细

移动端开发心得

时间:2015-02-27 06:43:11      阅读:220      评论:0      收藏:0      [点我收藏+]

标签:

1、 iOS里fixed中有input或者textarea,用户在里面输入文字,触发键盘,fixed容器会居中显示,而不是继续悬浮
      解决办法: http://dwz.cn/CrwNz
2、移动端click时间300ms延迟
      解决办法:zepto.js  或者百度touch.js 或者是fastclick.js
3、zepto的touch问题:swipe事件在小米1等低端手机不支持 基本不用zepto
4、百度的touch.js通过touch.on进行绑定事件,但是点击会遇到点透问题,也就是父级触发,子级触发
     解决办法:下载最新版touch  地址:http://touch.code.baidu.com/ 通过最新API               ev.originEvent.preventDefault();
之前伟强博客写的点透问题解决办法,用到touchend或者是touchstar,可以是可以,但是有没有考虑用户在有滑屏的时候刚好手指刚碰到这个按钮或者刚好在这个按钮手指离开,也就会触发这个按钮事件,所以这种方法不太合理,往往都是点击才触发的不是碰一下就让他触发。
5、select下拉框的高问题,手机显示样式不一样,在QQ浏览器 弹出的option列表的height跟select一样高,在HTC手机自带的浏览器,height设置较高的时候,不能用option去选中需要的参数值,还有option默认显示的第一个有底色
6、在ipod、iphone4不支持通过tap触发事件audio的JS,比如不能通过src的改变触发声音播放,用click去解决。
7、移动端audio在苹果手机不支持音乐自动播放,苹果有安全机制,需要用户去手动触发才能播放音乐,也就是现在很多一屏一屏滑动项目要加个音乐图标 不只是简单的让用户去关掉音乐,投机做法是用户手触发到屏幕的时候就执行ID.play();的JS
8、表单就不说了,比如上传按钮设背景图无效,都是通过opacity为0来模拟的,但是面试学生居然这都反应不过来
9、很多人用到fullPage.js来实现大图滚动或者是一屏一屏的,但是在微信开发中用到这插件如果不设置anchors来定义锚点,微信的公众号发布文章都带有链接参数 有#号,不加anchors ,就会出现滚到第二屏用户退出继续进去 马上跳到第二页问题。
 解决办法:anchors: [‘page1‘, ‘page2‘, ‘page3‘, ‘page4‘],
10、推荐使用swiper.js进行开发,比较好的中文API网站是:http://www.swiper.com.cn/ 能解决很多移动端问题,
11、苹果系统在滚动长页面的时候总是滚的很不爽,不利索,回弹效果,加一句代码:-webkit-overflow-scrolling : touch;
12、video默认控制器隐藏:video::-webkit-media-controls-enclosure { display:none!important;} ,还有就是video在移动端可以设置第一帧画面,但是有些手机比如HTC默认是灰色背景的,解决办法无非就是弄个图盖在上面,点击的时候图消失 触发play,处女座才这么干。
13、PNG图压缩很头疼,效果不好,你可以试试这个网站: https://tinypng.com/ 很多新人都知道jpg可以调质量,但是不知道png也能这么压缩,效果最好的一个网站。现在出现一种质量更低的webP格式图,谷歌开发的,安卓手机测试都可以,苹果手机不行。不采用,可以了解一下。 可查看智图: http://zhitu.tencent.com/
14、能用字体图标就用字体图标,IE6都能兼容,移动端怕啥? http://www.iconfont.cn/   
15、CSS3动画效果可以参考下Animate.css  写的很不错: http://daneden.github.io/animate.css/
       有些低端手机比较炫的效果直接有前有后,没有中间效果,手机卡出翔,不支持。
16、了解viewport.js的人,如果遇到一些手机缩放小变大,jquery就要放到viewport引用前面,还有就是meta标签,需要注意width=device-width ,github地址:https://github.com/anatoo/viewport.js  用px来切图移动端,PC端怎么切你移动端也跟着切,但是一般少用,viewport会出现些问题,项目比较急才用
17、移动端用rem吧,别再用老掉牙的em了;
18、苹果手机都知道手机号码会消失不见,加句代码吧:<metacontent="telephone=no"name="format-detection"/>
     忽略邮箱识别,加句代码吧:<meta content="email=no" name="format-detection" />
19、 好累,先睡觉 改天再补充.....

移动端开发心得

标签:

原文地址:http://blog.csdn.net/html5_/article/details/43961457

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!