移动端HTML5开发心得
首先，先说的是我每个项目都会用到的一个模板页，这个我遇到大大小小的坑之后定义好的一个html文件
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8" />
- <!-- 宽度设置为设备实际宽度，初始化倍数为1，最小倍数为1，最大倍数为1，用户缩放为否 -->
- <meta name="viewport" content="width=device-width,inital-scale=1.0,minimum-scale=1.0,maximum-scake=1.0,user-scalable=no" />
- <!-- 删除默认的苹果工具栏和菜单栏 -->
- <meta name="apple-mobile-web-app-capable" content="yes" />
- <!-- 苹果手机顶部为黑色 -->
- <meta name="apple-mobile-web-status-bar-style" content="block" />
- <!-- 屏蔽浏览器自动识别数字为电话号码 -->
- <meta name="fromat-detecition" content="telephone=no" />
- <!-- base.css是所有项目都会用到的底层样式 -->
- <link rel="stylesheet" type="text/css" href="css/base.css" />
- <!-- content.css是每个项目所有页面都会用到的公共样式 -->
- <link rel="stylesheet" type="text/css" href="css/content.css" />
- <!-- main.css为每个页面或是模块用到的一个样式文件-->
- <link rel="stylesheet" type="text/css" href="css/main.css" />
- <title></title>
- <script type="text/javascript" src="lib/jquery-1.8.2.min.js"></script>
- <!-- base.js为所有项目都会用到的js文件 -->
- <script type="text/javascript" src="lib/base.js"></script>
- </head>
- <body>
- </body>
- </html>
上面的meta可以帮我避免了好都问题
遇到的问题：
1.苹果手机上面，input控件会有默认的样式
解决
- /*去掉苹果手机端web按钮默认样式，解决按钮默认圆角问题*/
- input[type="button"]{-webkit-appearance:none; /*去除input默认样式*//*border-radius: 0px;*/}
解决
- /*屏蔽点击元素出现底色*/
- a
- {
- -webkit-tap-highlight-color:rgba(255,255,255,0);
- }
解决
- -webkit-user-select:none;
这种结构
（1）.第一次做的时候，左右两块都是用百分百，这样在不同的屏幕因为右边字体的原因会有布局混乱的情况，然后就用媒体查询写多了两个样式文件，不过还有一个就是在平板上面，同样的百分百，左边的图片太大，导致右边的文字之间的间距要很大才可以对齐，效果很不好
（2）.第二次做的时候，就想到了一个方法，利用float脱离文档流的特性，给图片设置一个maxwidth，然在device-width*图片百分百=maxwidth时，将文字所在的div的float设置为none；且设置margin-left为图片的宽度+之间的间距。
（3）.第三次做的时候，因为看了其他的一些轻APP在横屏的时候，图片大小依然一致，所以把图片宽度定死，给个max-width和min-width，用弹性布局 flex-box，这回就很简单的高度这个布局问题
5.在微信，UC打开页面会有缓存问题，导致有时候改动的小效果看不到
解决：这里试过用cache来不让其缓存，不过用完之后反而令他们不加载文件（至今还没成功使用过cache），最后在加载发送请求的时候文件后面添加多个随机数，这样才解决测试是缓存问题
6.在做手机页面的时候，很多时候会用到z-index这个属性，如果用到这个属性的时候再对对应元素设置的话，会比较容易乱。
解决：我设置了
top0{z-index:9999};
top1{z-index:8888};
top2{z-index:7777};
top3{z-index:6666};
top4{z-index:5555};
这样，在每个页面中，对应得贴上上面样式就行了。
7.还有就是多列布局column，弹性布局flex-box
在不知道这两种布局的时候，以下布局对来来说是比较麻烦的,特别是三列的，并且中间那个还有左右边框，定义百分百的时候比较麻烦。
在知道多列布局column，弹性布局flex-box后 上面的问题很好解决，但是要记得column的子元素要给高度，不然有可能会布局混乱
还有个问题就是设置column-count为3的时候，在7个子元素的时候会是这样的
竖着排列，不符合正常的一个阅读习惯，最后还是改成了float来布局
8.em跟rem的区别
em是相对于父层
rem是相对于根元素
所以说，如果html{font-size:62.5%};的时候，
如果是在parent元素设置1.5em,child设置1.0em就等同于html的1.5em了
在parent元素设置1.5em的情况下，child用rem作为font-size的单位的话，那么就要设置1.5rem才等同上面的效果
9.backgrond-size,这个属性很好用
用法有 a.百分百 b.直接给宽高 c.cover d.contain四种用法，按需要选择使用
10.在iphone中，在手机改为横屏模式的时候，字体会默认变大
解决:
/*禁止IOS横屏的时候字体变大*/
-webkit-text-size-adjust: none;
11.在用到<div><img src="" /></div>这个结构的时候，就是用块级元素包住img的时候，会出现div高度大于img的情况，就是有点高度不知道怎么来的 解决:img{display:block;};
12.在用到media的时候，如果在<meta>有设置width=device-widht的话，media中在设置max-width min-width，这里不能用max-device-width 跟 min-device-height，不然会没效果
13.目前手机web还无法禁用手机横屏的情况下，如果你页面布局有问题的话，在横屏的时候会出现布局乱的情况
解决
在横屏的时候弹出个层把他改正
例如
- /*@media screen and (orientation:landscape)
- {
- .orientation-phone
- {
- display: block;
- }
- }*/
- /*页面遮盖层*/
解决:在body设置高度100%，且overflow-hidden;在弹出消失的时候才去掉overflow-hidden;
15.在做一个手机web项目的时候，要先总结下页面所以的字体大小，然后定义好几种常用font-size，防止后期混乱
16.在看设计稿的时候，要注意比例的缩放，因为UI做的时候用的尺寸是用640*1136（至少我这边是这样），然后再做手机web的时候，我们再mate那里content设置width=device-width，所以要根据实际的页面效果来定义页面常用的font-size大小以及其他。不能按UI给出的字体大小来设置font-size。
17.在class反面，少用继承，多用组合，这样可以加快开发效率，可以自己定义一个底层样式base.css（常用样式且所以项目都可以共用）
18.可能做手机web的都去学校手机web开发框架，例如我就是学了jquery mobile，这个框架很强大，但是不的不说，就是在UI样式方面比较麻烦，要不断的去覆盖样式，如果你的web是UI是有自己特色的话，这个时候用jquery mobile就比较费时间（至少我是这样）。所以说在开发的时候，觉得哪个方法快就用哪个，不要为了用框架而且用框架。
************************************************************分割线 ************************************************************************************以下规范建议，均是Alloyteam在日常开发过程中总结提炼出的经验，规范具备较好的项目实践，强烈推荐使用
字体设置
使用无衬线字体
body { font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif; }iOS 4.0+ 使用英文字体 Helvetica Neue，之前的iOS版本降级使用 Helvetica。中文字体设置为华文黑体STHeiTi。 需补充说明，华文黑体并不存在iOS的字体库中(http://support.apple.com/kb/HT5878)， 但系统会自动将华文黑体 STHeiTi 兼容命中系统默认中文字体黑体-简或黑体-繁
Heiti SC Light 黑体-简 细体 （iOS 7后废弃） Heiti SC Medium 黑体-简 中黑 Heiti TC Light 黑体-繁 细体 Heiti TC Medium 黑体-繁 中黑
原生Android下中文字体与英文字体都选择默认的无衬线字体
4.0 之前版本英文字体原生 Android 使用的是 Droid Sans，中文字体原生 Android 会命中 Droid Sans Fallback 4.0 之后中英文字体都会使用原生 Android 新的 Roboto 字体 其他第三方 Android 系统也一致选择默认的无衬线字体
基础交互
设置全局的CSS样式，避免图中的长按弹出菜单与选中文本的行为
a, img { -webkit-touch-callout: none; /* 禁止长按链接与图片弹出菜单 */ } html, body { -webkit-user-select: none; /* 禁止选中文本（如无文本选中需求，此为必选项） */ user-select: none; }
移动性能
要考虑Android低端机与2G网络场景下性能 注意！
发布前必要检查项
- 所有图片必须有进行过压缩
- 考虑适度的有损压缩，如转化为80%质量的jpg图片
- 考虑把大图切成多张小图，常见在banner图过大的场景
加载性能优化, 达到打开足够快
- 数据离线化，考虑将数据缓存在 localStorage
- 初始请求资源数
< 4注意！ - 图片使用CSS Sprites 或 DataURI
- 外链 CSS 中避免 @import 引入
- 考虑内嵌小型的静态资源内容
- 初始请求资源gzip后总体积
< 50kb - 静态资源(HTML/CSS/JS/Image)是否优化压缩？
- 避免打包大型类库
- 确保接入层已开启Gzip压缩（考虑提升Gzip级别，使用CPU开销换取加载时间） 注意！
- 尽量使用CSS3代替图片
- 初始首屏之外的静态资源（JS/CSS）延迟加载 注意！
- 初始首屏之外的图片资源按需加载（判断可视区域） 注意！
- 单页面应用(SPA)考虑延迟加载非首屏业务模块
- 开启Keep-Alive链路复用
运行性能优化, 达到操作足够流畅
- 避免 iOS 300+ms 点击延时问题 注意！
- 缓存 DOM 选择与计算
- 避免触发页面重绘的操作
- Debounce连续触发的事件(scroll / resize / touchmove等)，避免高频繁触发执行 注意！
- 尽可能使用事件代理，避免批量绑定事件
- 使用CSS3动画代替JS动画
- 避免在低端机上使用大量CSS3渐变阴影效果，可考虑降级效果来提升流畅度
- HTML结构层级保持足够简单
- 尽能少的使用CSS高级选择器与通配选择器
- Keep it simple