20140609一些移动前端开发经验总结

布局

1.定高定宽

完全按照设计稿/2的比例，然后整体居中。

当急着出页面，或者不适合变宽的时候，选择这个方式。

参考网站http://m.tmall.com

 

2.定高变宽

有些内容要考虑手机浏览器的不同宽度。

比如菜单，栏目列表等等。

常用布局手段，display:-webkit-box;或者inline-block加百分比。

进一步学习可浏览http://qianduanblog.com/2549.html

参考网站http://3g.163.com/touch/

 

3.保持宽高比

同样是百分比布局，但是用到比较少。看实际情况。

相关经验可浏览http://www.cnblogs.com/samwu/p/3507935.html

 

4.瀑布流

看实际情况使用。

 

5.布局代码的编写过程

从设计稿里抽象出模块单元，先完成模块，然后组装成页面。

根据css选择器权重特性，来封装css模块。

根据前端模板引擎，来封装html代码模块。

 

6.移动端常用布局例子

 

常用样式reset

body{

margin: 0;

}

a, a:link, a:visited, a:hover, a:active{

text-decoration: none;

font: inherit;

color: inherit;

}

 

常用交互组件

1.轮播图

https://github.com/thebird/Swipe

http://www.idangero.us/sliders/swiper/demos.php

2.图片懒加载

http://www.cnblogs.com/samwu/p/3515177.html

3.分页

判断滚动条触底

$(document).height() - $(window).height() == $(window).scrollTop()

Ajax请求数据，渲染页面。

4.日历控件

5.日期选择控件

6.表单控件

......

 

 

手机浏览器常用问题解决

 

1.点透和300ms延迟问题 

* 使用fastclick库，用click事件代替tap事件。 

* 仅针对安卓的解决方案 <meta name="viewport" content="width=device-width, user-scalable=no"> 

2.消除transition闪屏 

-webkit-transform-style: preserve-3d; /设置内嵌的元素在 3D 空间如何呈现：保留 3D/ 

-webkit-backface-visibility:?hidden; /（设置进行转换的元素的背面在面对用户时是否可见：隐藏）/

3.禁止用户选中文字 

-webkit-user-select:none;-webkit-touch-callout: none;

4.阻止页面滚动 

* ontouchmove="event.preventDefault()" //锁定viewport，任何屏幕操作不移动用户界面（弹出键盘除外）。 

* 设置body高度为一屏幕高度

5.点击元素背景色变 

-webkit-tap-highlight-color: 颜色

6.不让android识别邮箱 

<meta content="email=no" name="format-detection" />

7.自定义滚动条 

http://www.cnblogs.com/samwu/p/3508548.html

8.position:fixed;自适应bug

基本思路是，fixed元素内嵌absolute元素，脱离文档流

https://github.com/maxzhang/maxzhang.github.com/issues/11

对于头部和底部悬停的区域，可以不用fixed定位。通过使一屏幕的高度减去头部和底部高度，中间部分overflow:auto;来实现。

9.未满一屏，弹出键盘，input的focus

10.手机或电话号码切换到拨号 a href=”tel:13312345678”