布局
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”