移动端前端开发总结

一 兼容设备/运行环境

一、手机独立浏览器/微信内置浏览器/qq内置浏览器/嵌入手机APP（Android|IOS) webview加载

二 移动端前端开发规范

alloyteam.github.io/Spirit/modu…

三 与web网页不一样之处

1 浏览器内核

Android：Webkit内核

不少手机浏览器厂商都宣称有着自主内核，事实上，他们都是基于开源内核Webkit进行二次开发的，并非彻底的自主内核。

iOS：基于Safari

基于safari二次开发，或者直接使用手机safari内核

注：手机所使用的浏览器内核版本通常都比较高，可使用html5,css3的新特性

2 技术上的区别/建议

1 flex布局--建议

2 使用字体图标

3 页面图片---经过媒体查询，针对不一样retina屏 使用2@或者3@图相关连接

4 meta标签--针对手机设备meta标签详解

5 css样式 去掉不一样手机浏览器自带样式 清除手机浏览器自带样式

6 代码结构清晰，代码量最好不要太多

7 调试工具 f12谷歌调试，真机，同一局域网调试

8 目前经常使用 webpack,sass,h5,css3

三 常见问题

（1） 底部postion:fixed内容出不来

解决：document.documentElement.style.height = window.innerHeight + 'px';

（2）底部position:absolute内容出不来

解决：html{ position:relative }

（3）移动页面的滚动条问题

解决：IOS和安卓能够自行隐藏

（4）移动端点击事件延迟问题

监听 touch 多点触控

www.cnblogs.com/qianduanjin…

（5）苹果顶部有20px的距离，安卓没有

解决办法：经过js判断设备内核：www.jb51.net/article/698…

（6） 1像素问题

(7) ios会缓存页面

四 开发建议

1 字体

body{font-family:-apple-system, BlinkMacSystemFont,"PingFang SC","Helvetica Neue",STHeiti,"Microsoft Yahei",Tahoma,Simsun,sans-serif;}

2 设备像素比例

1px 至关于多少物理像素

window.devicePixelRatio

3 ios UIwebview 缓存可能致使的问题

ios端 不能用如下的写法

self.request=[[NSURLRequest alloc]initWithURL:[NSURL URLWithString:htmlString]];

应该写成：

//加载请求的时候忽略缓存self.request=[NSURLRequest requestWithURL:[NSURL URLWithString:htmlString]cachePolicy:NSURLR

4 动画问题

（1）transition 闪屏问题

-webkit-transform-style: preserve-3d;

-webkit-backface-visibility: hidden;

高性能动画方案：github.com/AlloyTeam/M…

（2）减小页面的重绘回流

CSS动画属性会触发整个页面的重排relayout、重绘repaint、重组recomposite

所触发的页面从新layout操做都会放在----------layout-queue 中

由于left会额外触发layout与paint，而webkit-transform只触发整个页面composite

（3）动画尽量绝对布局 -------- 减小页面重排

（4）

5 经常使用meta

<!-- IE使用现有最高版本 -->

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<!-- 启用360浏览器的极速模式(webkit) -->

<meta name="renderer" content="webkit">

<!-- 不让百度转码 -->

<meta http-equiv="Cache-Control" content="no-siteapp" />

<!-- 忽略页面中的数字识别为电话，忽略email识别 -->

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

<!-- 页面宽度等于设备宽度，禁止缩放 -->

<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

<!-- 启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏 -->

<meta name="apple-mobile-web-app-capable" content="yes" />

7 加settimeout速度加快

$('div').on('touchmove', function(){

setTimeout(function(){

//.….code

},0);

});

8 ios 和 andriod 禁用 视频自动播放

若有须要：

document.addEventListener('touchstart', function () {

document.getElementsByTagName('audio')[0].play();

document.getElementsByTagName('audio')[0].pause();

});

9 清除input控件会自带close按钮

input::-webkit-search-cancel-button {

display: none;

}

其它常见问题积累：caibaojian.com/mobile-web-…

知乎移动端开发+vue踩过的坑： zhuanlan.zhihu.com/p/30419351

40条移动端开发常见问题：www.jb51.net/article/849…

资源连接

github.com/doyoe/trip

腾讯 移动开发团队

www.alloyteam.com/

腾讯兼容性测试平台

wetest.qq.com/cloud/deepc…

面向亿万用户级的移动端Web解决方案：

github.com/AlloyTeam/M…

腾讯移动Web总体解决方案

github.com/AlloyTeam/S…