本文整理了前端开发同学在开发手机页面的时候遇到的各种问题，希望能够对解决移动前端开发中遇到的问题提供帮助。

Android WebView 简介

在 Android 中提供了 WebView 控件用来展示网页内容。对于 WebView 需要注意：Android 的 WebView 的主要问题在于不同 Android 版本的 WebView 使用了不同的浏览器内核和浏览器版本，所以需要进行 Android 版本适配。

在 Android 4.4 以下(不包含 4.4)系统 WebView 底层实现是采用 WebKit(http://www.webkit.org/) 内核，而在 Android 4.4 及其以上 Google 采用了 chromium(http://www.chromium.org/) 作为系统WebView的底层内核支持。

相关文章：

Android 各个版本 WebView
Android：最全面的 Webview 详解
如何设计一个优雅健壮的Android WebView？（上）
如何设计一个优雅健壮的Android WebView？（下）

IOS 的 UIWebView 和 WKWebView 简介

使用 IOS 的 WebView 需要注意：当前页面展示在 IOS 系统中时，存在两种 WebView 环境：UIWebView 和 WKWebView。两者是有一定差别的：

UIWebView 自 IOS2 就有，WKWebView 从 IOS8 才有，毫无疑问WKWebView 将逐步取代笨重的 UIWebView。

相关文章：

iOS UIWebView 与 WKWebView
iOS中UIWebView与WKWebView、JavaScript与OC交互、Cookie管理看我就够（上）
iOS中UIWebView与WKWebView、JavaScript与OC交互、Cookie管理看我就够（中）
iOS中UIWebView与WKWebView、JavaScript与OC交互、Cookie管理看我就够（下）
UIWebView与WKWebView

引用两个 WebView 在性能上的差异描述：

WKWebView相较于UIWebView在整体上有较大的提升，满足OS上面使用同一套控件的功能，同时对整个内存的开销以及滚动刷新率和JS交互做了优化的处理。依据职责单一的原则，拆分成了三个协议去实现WebView的响应，解耦了JS交互和加载进度的响应处理。WKWebView没有做缓存处理,所以对网页需要缓存的加载性能要求没那么高的还是可以考虑UIWebView.

资料整理

下面是网上一些关于移动前端开发的文章，我们按照类别进行分类整理，并写上文章的发布时间（老文章可能不适用当前状况）。以便遇到相应问题时更好的去查阅，定位和解决问题。

使用指南

如果遇到了移动前端的问题，先按类别找到相应文章列表，从中找解决方案。
如若没有则在整理 总结列表 中去找，很多小问题点都可以在里面找到
如果还是无法解决可以通过评论与我沟通，一起努力找出解决方案。

第三方接口

移动端H5多平台分享实践 (2018.1)
微信自定义分享链接和图文 (2018.9)
微信扫码提示在浏览器中打开的遮罩代码 (2017.8)
微信、手机QQ和QQ空间的web app内置分享API代码 (2017.5)
微信开放JS-SDK，助力网页开发 (2016.8)
微信怎么设置在浏览器中打开APP下载链接 (2017.8)
微信打开网址添加在浏览器中打开提示遮罩 (2016.11)

屏幕适配

屏幕适配
- 移动端上的设计和适配 (2018.6)
- 再聊移动端页面的适配 (2017.8)
- 移动设备强制横屏显示以及兼容问题 (2017.12)
- 移动前端自适应适配布局解决方案和比较（2017.12）
- 移动前端的一些坑和解决方法（外观表现）（2015.7）
像素单位
- 视窗单位在移动端上的使用技巧（2018.8）
- 再谈Retina下1px的解决方案（2017.7）
- 移动端1px的边框（2016.2）
flexible & rem & mata 适配方案
- 使用Flexible实现手淘H5页面的终端适配（2015.11）
- 移动前端自适应适配方法总结（2018.9）
- 移动端开发需要加的meta （2017.7）
- rem是如何实现自适应布局的？（2017.8）
- rem自适应布局-移动端自适应必备:flexible.js （2018.9）
- HTML meta标签总结,HTML5 head meta属性整理（2017.7）
vm & vh 适配方案
- 【精】如何在Vue项目中使用vw实现移动端适配（2018.1）
- 认识视口单位vm、vh在网页中的排版应用（2017.7）
- 使用VH和VW实现真正的流体排版（2017.7）
iPhoneX
- iPhone X的Web设计（2017.9）
- iPhone X的缺口和CSS （2017.9）

缓存&存储

移动web缓存介绍（2017.6）

touch 事件

移动端 Touch 事件介绍（2017.1）

flex布局

Flex 布局新旧混合写法详解（兼容微信）（2015.11）
flex在安卓4.3中的兼容方式（2016.8）
移动端CSS平分等分布局延伸（2017.5）

position定位

你对Position的了解程度有多少? （2013.10）
Web移动端Fixed布局的解决方案（2015.4）

优化加速

CSS3硬件加速技巧（2015.12）
移动网站性能优化：网页加载技术概览（2015.2）
必看！移动前端开发优化指南 (2015.1)

调试& 测试

移动前端开发调试（2015.1）

z-index层叠

深入理解CSS中的层叠上下文和层叠顺序（2016.1）

动画&样式

手淘年货节舞龙揭幕动画实战（2016.1）
requestAnimationFrame详解以及无线页面优化（2017.12）
不容错过的移动前端页面制作技巧（2015.2）

整理总结

【精】移动端重构实战系列1——基础知识（2016.7）
【精】Mars 上的问题汇总和格式整理 (2016.6)
【精】手机端页面在项目中遇到的一些问题及解决办法（持续更新） (2018.6)
【精】移动Web资源整理（2015.3）
分享手淘过年项目中采用到的前端技术 (2018.2)
移动端 Web 开发前端知识整理（2015.5）
移动前端知识总结（2016.3）
移动端制作遇到的坑（2015.12）
移动端资源集锦（2014.7）

移动前端系列内容

Mars —— 腾讯团队整理的一些移动前端问题
移动Web开发 —— 有人整理的一系列移动前端开发知识，有不少有价值的内容。
w3cplus-mobile —— 大漠老师整理的内容质量是比较高的。
前端开发博客-移动前端开发 —— 这是我找了两天找到的最好的移动前端开发内容整理了。

整理心得

复制粘贴了这么多文章，简单整理了一下移动前端开发中存在的各类问题。

Android 分为 webkit 和 chrome 两个时代。
IOS WebView 有 UIWebView 和 WKWebView 两种。
移动开发中经常遇到要与微信、百度等第三方接口接入的情况。
移动端的屏幕尺寸类型非常繁杂，所以需要进行适配优化。
屏幕适配现在有两种主流方案：flexible 流和 vm 流。
- flexible 流使用 rem 和 meta 来对尺寸进行等比缩放。
- vm 流使用 vm 和 vh 单位获取来定义元素尺寸，具体可以参考vh,vw单位你知道多少？。
在适配时特别注意 iPhoneX 的刘海屏，有解决方案可以特殊处理刘海屏。
在使用屏幕适配后，特别要注意实现 1px 像素的显示。
retina 屏有时会出现元素显示模糊的情况。
移动端特有 touch 事件来处理屏幕的触摸行为。
flex 布局在 Android 4.3 及其之前的机型有兼容问题，需要做兼容处理。
在 IOS 中用 position:fixed 定位顶部和底部元素，在弹出软键盘的时候会出现 fixed 元素位置偏移和消失的问题。偏移问题建议改为 absolute 来实现，而消失问题建议使用滑动完成后使用 JS 代码实现屏幕点击来调出元素显示。
IOS 的 WebView 有底部弹性功能，对于 fixed 和 absolute 定位有一些奇怪问题，建议使用 touchmove 事件监听拦截弹性功能。
页面滑动卡顿可以通过 setTimeout(event, 0) 来解决。
移动端的调试是比较麻烦的，解决方案是使用 Charles 代理查看 log。
移动端需要前端实现一些动画活动页面最好使用 CSS 的动画去实现性能更佳。
其他细节点请查阅 整理总结 前三篇文章。

最后

本文致力于实现快速定位和解决移动前端问题，将会不断更新。

如果有任何问题或者好的移动前端开发资料，请再评论区留言一起讨论。让我们一起努力填平移动前端中的坑。

2018 年最新的移动前端资料整理