本文整理了前端开发同学在开发手机页面的时候遇到的各种问题,希望能够对解决移动前端开发中遇到的问题提供帮助。
Android WebView 简介
在 Android 中提供了 WebView 控件用来展示网页内容。对于 WebView 需要注意:Android 的 WebView 的主要问题在于不同 Android 版本的 WebView 使用了不同的浏览器内核和浏览器版本,所以需要进行 Android 版本适配。
在 Android 4.4 以下(不包含 4.4)系统 WebView 底层实现是采用 WebKit(www.webkit.org/) 内核,而在 Android 4.4 及其以上 Google 采用了 chromium(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)
相关工具库项目及用法
- 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 的动画去实现性能更佳。
- 其他细节点请查阅
整理总结
前三篇文章。
最后
本文致力于实现快速定位和解决移动前端问题,将会不断更新。
如果有任何问题或者好的移动前端开发资料,请再评论区留言一起讨论。让我们一起努力填平移动前端中的坑。