2018年最新的移动前端资料整理（不断更新）

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

Android WebView 简介

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

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

相关文章&＃xff1a;

Android 各个版本 WebView
Android&＃xff1a;最全面的 Webview 详解
如何设计一个优雅健壮的Android WebView&＃xff1f;&＃xff08;上&＃xff09;
如何设计一个优雅健壮的Android WebView&＃xff1f;&＃xff08;下&＃xff09;

IOS 的 UIWebView 和 WKWebView 简介

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

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

相关文章&＃xff1a;

iOS UIWebView 与 WKWebView
iOS中UIWebView与WKWebView、Javascript与OC交互、COOKIE管理看我就够&＃xff08;上&＃xff09;
iOS中UIWebView与WKWebView、Javascript与OC交互、COOKIE管理看我就够&＃xff08;中&＃xff09;
iOS中UIWebView与WKWebView、Javascript与OC交互、COOKIE管理看我就够&＃xff08;下&＃xff09;
UIWebView与WKWebView

引用两个 WebView 在性能上的差异描述&＃xff1a;

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

资料整理

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

使用指南

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

第三方接口

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

屏幕适配

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

缓存&存储

移动web缓存介绍 &＃xff08;2017.6&＃xff09;

touch 事件

移动端 Touch 事件介绍 &＃xff08;2017.1&＃xff09;

flex布局

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

position定位

你对Position的了解程度有多少? &＃xff08;2013.10&＃xff09;
Web移动端Fixed布局的解决方案 &＃xff08;2015.4&＃xff09;

优化加速

CSS3硬件加速技巧 &＃xff08;2015.12&＃xff09;
移动网站性能优化&＃xff1a;网页加载技术概览 &＃xff08;2015.2&＃xff09;
必看&＃xff01;移动前端开发优化指南 (2015.1)

调试& 测试

移动前端开发调试 &＃xff08;2015.1&＃xff09;

z-index层叠

深入理解CSS中的层叠上下文和层叠顺序 &＃xff08;2016.1&＃xff09;

动画&样式

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

整理总结

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

移动前端系列内容

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

整理心得

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

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