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

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.

资料整理

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

使用指南

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

第三方接口

• 移动端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）

相关工具库项目及用法

• px2rem-loader -- Github
• iscroll -- Github
• 如何使用iscroll.js插件 （2016.2）
• Swipe -- Github
• Swipe-移动触摸滑动轮播图插件swipe.js （2018.9）

移动前端系列内容

• 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 的动画去实现性能更佳。
• 其他细节点请查阅 整理总结 前三篇文章。

最后

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

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