移动端兼容

Posted 过客晶伊

tags:

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

移动端前端开发注意点

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

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

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

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

移动端注意点

推荐几篇博文

在开始移动端的开发前,我先搜罗了别人写的博客,感觉有几篇文章还是不错的,分享出来给大家看看。 
手机/移动前端开发需要注意的20个要点 
“移动端”宴席知多少 
移动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 */
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

在 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 */
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

在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 */
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

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

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

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

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

在安卓中:

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

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

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

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

移动端开发的框架推荐

jquery mobile

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

SUI mobile

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

weUI

这是一个在github上找到的框架,据说是微信团队开发的,还没使用,下次试试看。先放上链接weUI

总结

能用原生就用原生,加快速度。。嘻嘻。。。

 

以上是关于移动端兼容的主要内容,如果未能解决你的问题,请参考以下文章

classlist.add在移动端存在兼容性吗

解决移动端报错:Unable to preventDefault inside passive event listener due to target being treated as……(代码片段

移动端兼容处理

移动端audio音频播放兼容方案

移动端底部导航栏固定——兼容IOS

移动端兼容性问题解决方案