移动端小技巧

判断是否触屏设备(特性检测)

image.png

里面有个标签 canvas

打开浏览器审查元素 F12
在console中输入 canvas.ontouchstart 之后输出 undefined ，表明该设备是非触屏设备

image.png

在F12中点击左边的手机标示，输入相同的代码查看，看见里面输出的是null 表明该设备是触屏设备

image.png

if (document.body.ontouchstart !== undefined) {
        //  触屏设备
}else{
        // 非触屏设备
}

在正常网页中 放到手机网页中页面缩小的原因

image.png

在2010年的时候，诺基亚手机是小屏的样子，那时候上网浏览网页的时候使用的技术是wap页面。那个诺基亚手机不支持html解析，所以是简化版的html，而且显示网页会有滚动条

后来苹果出来了iphone 3gs，这个第一部智能手机可以解析html，但是如何上网呢？这时候乔布斯说，把浏览器网页缩放到页面中，就是说原来在浏览器中能正常显示的网页，到了手机上，他就会缩小。那么这个怎么解决？
添加如下代码

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>

image.png

clientX 与clientY

image.png image.png image.png image.png

为什么这个clientX和clientY藏在touches里面？？？

这个涉及到一个设备的相关知识。
就是触屏支持多点触控。
一台电脑不可能有四个鼠标，但是触屏设备可以有多点触控，就是说 可以两指滑动，三指滑动甚至四指滑动。这样就是明白了吧！！！这个事件就是收集用户滑动的手指，放到touches里面，也就是说有多个触控点，有每一个触控点的坐标。

所以修改一下上面的代码

image.png image.png

手机屏幕禁用滚动

添加上这个代码

overflow: hidden;

body {
    overflow: hidden;
}

#canvas {
    display: block;
    background: white;
    position: fixed;
    top: 0;
    left: 0;
}

局域网调试

image.png image.png