移动端兼容

Posted 2020-10-12 过客晶伊

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了移动端兼容相关的知识，希望对你有一定的参考价值。

移动端前端开发注意点

第一次接触移动端开发，发现web端和移动端的差别还是很大的，我主要记录移动端的一些内容：

移动端与web端在网页设计与交互方面的差别
移动端注意点
一些小技巧
移动端的一些问题及解决方法

移动端与web端在网页设计与交互方面的差别

纯粹是个人看法。
在web端是尽可能地展示丰富的功能，并且较为复杂，一个页面可以包含很多的内容。当然在交互方面也是相对复杂些，一般不是直接把“下一步”放在用户面前，而是让用户自己去找。
而移动端设计应以简约为主,一个页面可能只有一个功能，并且操作起来一定要便捷。代码量不能太大，不然加载起来速度会比较慢。

移动端注意点

浏览器兼容问题

组长的要求还是比较严格的，希望移动端，web端都能兼容。于是我真的做了非常多的尝试。
由于移动端的浏览器大多数都是基于webkit内核的，因此对css3和html5的支持都比较好。所以大家可以放心的用了。这里推荐一个网站，可以验证兼容性的，感觉很好用：can I use.

移动端的特殊设计

移动端的设计都遵循着一些规则，比如，一般app的底部导航栏的高度都跟微信公众平台的底部菜单栏高度一致，为45px。
一般提交按钮或者其他标签与屏幕的边距一致，并且不随屏幕大小的变化而变化。
因为手机的配置不够高，所以尽量减少代码量，尤其是css，简约的设计加流畅的速度，一举两得。

一些小技巧

运用display:flex

弹性盒模型在布局上是非常灵活、便捷的，而且大大减少了代码量。
在web端上flexbox支持IE10+,safari6.1+,支持chrome,opera以及firefox，记得加前缀。
关于flexbox的相关知识可以查看flex语法篇、详解弹性盒模型。
之前我发现display:flex在微信浏览器和qq浏览器不兼容。微信浏览器用的是qq浏览器的内核，支持旧版的弹性盒模型。可以使用dispaly:box，当然前面要加-webkit-和-moz-的前缀。关于旧版的请见文章：旧版弹性盒模型。

box-sizing的妙用

box-sizing真是救世主般的存在。
有时候明明设置了宽度、高度，可突然发现后面需要加padding、border了，可是我想保持总的宽度和高度怎么办？这个时候box-sizing就可以发挥妙用了。box-sizing:border-box，这下padding和border都可以被算到width里了。如果还想按照原来的，那就设置为content-box就行了。

单位

一般web端使用px，但移动端一般多会采用em和rem，让单位成为一个不是固定数值的而是一个比例。
这方面可以多看看文章。

图片

不用换的作为背景的图片那就直接用background:url();另外还可以设置是否repeat，以及background-size和background-position等。
但是要换的图片一定不能放在css里面，不然就改不了了。

touch事件

可以直接参考jquery mobile。
在js中其实就是这几个事件而已：
touchstart: //手指放到屏幕上时触发

touchmove: //手指在屏幕上滑动式触发

touchend: //手指离开屏幕时触发

touchcancel: //系统取消touch事件的时候触发，这个好像比较少用

每个触摸事件被触发后，会生成一个event对象，event对象里额外包括以下三个触摸列表

touches: //当前屏幕上所有手指的列表

targetTouches: //当前dom元素上手指的列表，尽量使用这个代替touches

changedTouches: //涉及当前事件的手指的列表，尽量使用这个代替touches

这些列表里的每次触摸由touch对象组成，touch对象里包含着触摸信息，主要属性如下：
clientX / clientY: //触摸点相对浏览器窗口的位置
pageX / pageY: //触摸点相对于页面的位置
screenX / screenY: //触摸点相对于屏幕的位置
identifier: //touch对象的ID
target: //当前的DOM元素
这里引用了别人写的，加个链接：JS移动客户端–触屏滑动事件。
但是在touch事件里也发现了一些问题。

移动端的一些问题及解决方法

jquery mobile的swipe事件在安卓的微信浏览器及原生浏览器里不敏感

这是个很严重的问题，意味着用户体验会非常不好。因为安卓机的优化不好，导致了触摸不灵敏。
经测试，在安卓的chrome浏览器里完美支持，在原生及微信浏览器里经常滑不出来。
解决方法：1.采取硬件加速。css的3D动画会使GPU开启强制渲染，所以我们可以采取假3D方法对一个元素进行操作。
可以写成：

.cube {
   -webkit-transform: translateZ(0);
   -moz-transform: translateZ(0);
   -ms-transform: translateZ(0);
   -o-transform: translateZ(0);
   transform: translateZ(0);
   /* Other transform properties here */
}

在 Chrome and Safari中，当我们使用CSS transforms 或者 animations时可能会有页面闪烁的效果，下面的代码可以修复此情况：

.cube {
   -webkit-backface-visibility: hidden;
   -moz-backface-visibility: hidden;
   -ms-backface-visibility: hidden;
   backface-visibility: hidden;

   -webkit-perspective: 1000;
   -moz-perspective: 1000;
   -ms-perspective: 1000;
   perspective: 1000;
   /* Other transform properties here */
}

在webkit内核的浏览器中，另一个行之有效的方法是：

.cube {
   -webkit-transform: translate3d(0, 0, 0);
   -moz-transform: translate3d(0, 0, 0);
   -ms-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
  /* Other transform properties here */
}

但是硬件加速同样存在问题：
使用GPU可能会导致严重的性能问题，因为它增加了内存的使用，而且它会减少移动端设备的电池寿命。
并且经过亲测，灵敏度略有提高，但还是达不到理想的效果。
（博主的手机也不差吧，努比亚z9max，希望大家可以把测试的结果告诉我哦）

设置长按事件但浏览器默认的提示菜单也会跳出来

别一棍子打死，认为浏览器默认的就无法改变。
首先可以考虑取消浏览器默认事件，其他的事件也可以阻止。
在iPhone中很好解决，只要给长按的div设置两个css：

-webkit-user-select: none;/*禁用手机浏览器的用户选择功能 */
-moz-user-select: none;

在安卓中：

window.ontouchstart = function(e) { e.preventDefault(); };

但不知道为什么还是没能阻止提示菜单的出现，于是我又发现了一个：

document.oncontextmenu = function(){return false;};

没想到成功阻止了。
但是，在chrome及其他浏览器都可以，但在微信浏览器里还是无法实现。(⊙o⊙)…

移动端开发的框架推荐

jquery mobile

这应该是很多人在用的移动端开发框架，方便。然而我却并不喜欢。
首先，jquery为了兼容性，有很多可能你根本用不到的地方，因此造成了空间的浪费。当然它的兼容性也是它强大的优势之一。
jquery mobile的一个优点是你可以选择一些组件进行下载，因此大小可控。然而他对不同手机的兼容性似乎并不是太好，比如安卓的微信浏览器。

SUI mobile

一个由淘宝团队开发的框架。基于zepto。
它的组件还是不错的，但是在布局、样式方面比较局限。到后面我基本都没怎么用它的组件，因为毕竟自己写比改别人代码方便。
基于zepto让他既有优势又充满劣势。
zepto算是jquery的阉割版，因此文件小了很多。可是有些在移动端常用的方法也没了，比如我最喜欢用的animate。所以要做动画只能原生或者用css3，当然，坑爹的微信浏览器似乎也没有非常好得支持css3,so….