前端系统课程 - 19. Canvas 画板 (2)

视口设置

原先的电脑页面在手机上显示，由于屏幕缩小，手机只能将页面缩小后再显示，而想要让页面适配到手机屏幕，就要给页面设置视口适配。设置内容如下：

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

以上标签的 content 属性值，含义依次为：视口宽度，设置为了设备宽度；用户缩放，设置为禁用；初识缩放比例，设置为 1；最大缩放比例，设置为 1；最小缩放比例，设置为 1。

触摸事件句柄

  • 触摸开始（手指接触） ontouchstart

  • 触目移动（手指移动） ontouchmove

  • 触摸结束（手指抬起） ontouchend

触摸特性检测

可以使用 in 操作符，来检测 window 对象是否包含触摸事件 onmovestart 对应的属性，如果包含则返回 true，不包含则返回 false；而后通过返回值来设置要监听的事件，例如：

1
2
3
4
var hasTouch = 'ontouchstart' in window, // 检测是否为触摸设备
    tapStart = hasTouch ? 'touchstart' : 'mousedown',
    tapMove = hasTouch ? 'touchmove' : 'mousemove',
    tapEnd = hasTouch ? 'touchend' : 'mouseup'; // 监听不同设备事件

触摸事件信息

要获取触摸事件信息，需要先获取触摸点；由于触控设备大都支持多点触控，所以事件对象会将触摸点作为一个集合（非数组）返回，但是一般只处理一个触摸点，就是集合的第 0 个对象，即 touchEvent.touches[0]。其他的位置属性基本上和鼠标事件信息类似。