移动端html5问题总结

时间 2019-11-14

标签移动 html5 html 问题总结栏目无线繁體版

原文原文链接

1，开发时碰到了哪些技术问题css

1）低版本手机不支持es6，使用babelhtml

2）引入百度地图js api时，须要使用https协议，不然不能正常使用API。在iOS 10中，苹果对webkit定位权限进行了修改，全部定位请求的页面必须是https协议的前端

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

强制让文档的宽度与设备的宽度保持1:1，而且文档最大的宽度比例是1.0，且不容许用户点击屏幕放大浏览；加上这一句input获取焦点时页面不会放大webpack

4）在微信公众号中,input获取焦点时，页面上方会提示就会提示“防欺诈盗号，请勿支付或输入QQ密码”。在公众平台的管理后台设置业务域名便可解决ios

5）<form action="#" @submit="doSearch"><input type="search"/></form>css3

//点击键盘的搜索按钮便可触发form的submit事件 e.preventDefault();//阻止表单默认事件es6

移动端的键盘右下角显示“搜索”（安卓）或“Search"（苹果）按钮，点击该按钮便可提交表单web

6）页面列表上拉加载，实现分页，缩短请求时间canvas

监听页面滚动事件，判断滚动条离页面底部的距离，而后距离达到必定的值，向服务端发请求。将请求的结果拼接在原有的列表后面，便可实现上拉加载分页。

7）移动端html5拖拽

当按下手指时，触发ontouchstart；当移动手指时，连续地触发ontouchmove（在这个事件发生期间，调用preventDefault()事件能够阻止滚动）；当移走手指时，触发ontouchend。

onclick只在你快速点击并放开才会被执行，若是你点击一个区域，很迟才放开，那么onclick是不会执行的(touchstart->...->touchend)

执行顺序是ontouchstart > ontouchend > onclick

我的观点：移动端不能使用HTML5拖放实现拖拽效果（ondragstart...），可使用touch事件

8）ios上页面滚动不流畅

-webkit-overflow-scrolling: touch;

9）ios上背景图片闪烁加载问题（缘由暂时不详）

var cvs = document.createElement('canvas');
cvs.width = 5; cvs.height = 2;cvs.toDataURL();
这句话放在浏览器执行一下，就得出了base64的字符串。
<img class="blur-bg" :style="{backgroundImage: 'url('+picUrl+item.merLogo+')'}" src="data:image/png;base64,iVBORw0..."/>

10）兼容低版本手机系统（ios 9和ios 8）

10.1）不支持es6，如箭头函数和let

10.2）var App = new Vue({ router:router //不兼容缩写 });

10.3）兼容css3，如flex布局（ios浏览器是webkit内核）

加上-webkit-前缀；display: flex; display: -webkit-flex; flex: 1;-webkit-flex: 1;

10.4）autoprefixer+postcss-loader：根据当前浏览器给css加上必要的前缀以兼容该浏览器，同时移除没必要要的css前缀

2，移动端提升用户的体验度

1）经过上拉加载分页，缩短请求时间

2）减小等待，反馈及时

当不可避免的出现了加载和等待的时候，须要予以及时的反馈以舒缓用户等待的不良情绪。如：向服务端发请求时显示“加载中”弹框，请求完成关闭该弹框；当请求的数据为空时，在页面上提示查询无记录等，避免出现空白页面，让用户觉得应用卡死。

3）明确直观的的结果提示，如报错

除了在用户等待的过程当中需予以及时反馈外，对操做的结果也须要予以明确反馈。弹出式提示（Toast）适用于轻量级的成功提示，1.5秒后自动消失，并不打断流程，对用户影响较小，适用于不须要强调的操做提醒，例如成功提示。特别注意该形式不适用于错误提示，由于错误提示需明确告知用户，于是不适合使用一闪而过的弹出式提示。对于操做结果已是当前流程的终结的状况，可以使用操做结果页来反馈。这种方式最为强烈和明确的告知用户操做已经完成，并可根据实际状况给出下一步操做的指引。

4）减小 HTTP 资源请求次数&减少 HTTP 请求大小

使用构建工具如webpack来合并JavaScript 或 CSS 代码，压缩静态图片资源以及移除代码中的注释并压缩；

5）把 CSS 资源引用放到 HTML 文件顶部；JavaScript 资源引用放到 HTML 文件底部

通常推荐将全部 CSS 资源尽早指定在 HTML 文档 <head> 中，这样浏览器能够优先下载 CSS 并尽早完成页面渲染。

JavaScript 资源放到 HTML 文档底部能够防止 JavaScript 的加载和解析执行对页面渲染形成阻塞。因为 JavaScript 资源默认是解析阻塞的，除非被标记为异步或者经过其余的异步方式加载，不然会阻塞 HTML DOM 解析和 CSS 渲染的过程。

6）相对于桌面端浏览器，移动端 Web 浏览器上有一些较为明显的特色：设备屏幕较小、新特性兼容性较好、支持一些较新的 HTML5 和 CSS3 特性、须要与 Native 应用交互等。但移动端浏览器可用的 CPU 计算资源和网络资源极为有限，所以要作好移动端 Web 上的优化每每须要作更多的事情。首先，在移动端 Web 的前端页面渲染中，桌面浏览器端上的优化规则一样适用，此外针对移动端也要作一些极致的优化来达到更好的效果。

7）首屏加载和按需加载，非首屏内容滚屏加载，保证首屏内容最小化

因为移动端网络速度相对较慢，网络资源有限，所以为了尽快完成页面内容的加载，须要保证首屏加载资源最小化，非首屏内容使用滚动的方式异步加载。通常推荐移动端页面首屏数据展现延时最长不超过3秒。

8）图片压缩处理

在移动端，一般要保证页面中一切用到的图片都是通过压缩优化处理的，而不是以原图的形式直接使用的，由于那样很消耗流量，并且加载时间更长。

9）使用 touchstart 代替 click

因为移动端屏幕的设计， touchstart 事件和 click 事件触发时间之间存在 300 毫秒的延时，因此在页面中没有实现 touchmove 滚动处理的状况下，可使用 touchstart 事件来代替元素的 click 事件，加快页面点击的响应速度，提升用户体验。但同时咱们也要注意页面重叠元素 touch 动做的点击穿透问题。