移动端的一些基础知识

一、设备像素比
缩写简称dpr，也就是我们经常在谷歌控制台移动端调试顶端会看到的一个值。设备像素比 = 设备像素 / css像素（垂直方向或水平方向）。
可以通过JS来获取：

window.devicePixelRatio // 在iPhoneX上，3

二、点击延迟
1). 可以通过设置 user-scalable=no 不允许用户进行缩放来解决

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

缺点: 必须通过完全禁用缩放来达到去掉点击延迟的目的，但初衷是想禁止默认双击缩放行为，这样就不用等待300ms来判断当前操作是否是双击。但是通常情况下我们还是希望能通过双指缩放来进行缩放操作，比如放大图片，很小的一段文字。

2). 更改默认视口宽度,一般设置

<!-- 兼容 iPhone X-->
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover">

缺点: 需要浏览器的支持

3). 更改touch-action

html {
touch-action: manipulation;
}
touch-action默认为auto，而manipulation表示浏览器只允许进行滚动和持续缩放操作，类似双击缩放这种非标准操作就不可以。想当初，click事件在移动端有个300ms延时，就是因为避免和手机双击行为发生冲突。然而，当我们设置了touch-action:manipulation干掉了双击行为，则显然，300ms延时就不复存在，因此，下面的CSS声明可以用来避免浏览器300ms延时问题。

该属性其他值具体如下：

• none表示不进行任何touch相关默认行为，例如，你想用手指滚动网页就不行，双击放大缩小页面也不可以，所有这些行为要自定义。
• pan-x表示手指头可以水平移来移去。
• pan-left表示手指头可以往左移动，移动开始后还是可以往右恢复的。
• pan-right表示手指头可以可以往右移动，移动开始后还是可以往左恢复的。
• pan-y表示手指头可以垂直移来移去。
• pan-up表示手指头可以往上移，移动开始后还是可以往下恢复的。
• pan-down表示手指头可以往下移，移动开始后还是可以往上恢复的。
• pan-zoom表示手指头可以用来缩放页面。

缺点:

1. iOS Safari浏览器不支持；
2. 干掉了可能需要的原生的touch相关行为。

三、点击穿透
1). 添加preventDefault来阻止默认事件发生

box.addEventListener('touchstart',function(e){
	// 操作代码
})
box.addEventListener('touchend',function(e){
	console.log('tap结束')
	e.preventDefault();
})

2). 使用FastClick

页面直接引入fastclick.js

<script type='application/javascript' src='/path/to/fastclick.js'></script>

通过npm安装

npm install -s fastclick

初始化FastClick实例

// js
if ('addEventListener' in document) {
	document.addEventListener('DOMContentLoaded', function() {
		FastClick.attach(document.body);
	}, false);
}
// jQuery
$(function() {
	FastClick.attach(document.body);
});
// vue
npm install fastclick -S // 安装
import FastClick from 'fastclick' // 引入
FastClick.attach(document.body); // 使用

四、关于适配
使用插件转换单位。

npm install postcss-plugin-for-vue-px2rem-ignore1px -s

in

{
   .cls {
        width: 75px;
        font-size: 12dpx
        border: 1rpx
   }
}

out

.cls {
     width: 2rem;
     border: 1px;
 }
[data-dpr="1"] .cls { font-size: 12px }
[data-dpr="2"] .cls { font-size: 24px }
[data-dpr="3"] .cls { font-size: 36px }

五、判断设备是竖屏还是横屏

/* 竖屏 :输出设备中的页面可见区域高度大于或等于宽度*/

@media screen and (orientation:portrait) {
html{
	background: red;
}
/* portrait-specific styles */

}

/* 横屏:除portrait值情况外，都是landscape */

@media screen and (orientation:landscape) {
html{
	background: blue;
}
/* landscape-specific styles */

}