移动端禁止用户缩放和 JS 判断浏览器是PC端还是移动端

首先要了解为什么移动端会有这个双击缩放功能，因为以前的网站呈现在手机上布局视口 980px 手机屏幕正好卡住版心，至于为什么移动的布局视口为什么是 980 参考我的文章 REM布局。从现在前端的角度来看缩放对用户就不是那么重要了。甚至显得多余，因为这会造成页面滑动，出现滚动条影响用户体验。

移动端禁止双指缩放功能 user-scalabel=no 实现：

这是最简单的，但是 IOS 系统会有兼容问题。

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
/*
width // 设置 viewport 的宽度，正整数/字符串 device-width
height // 设置 viewport 的高度，正整数/字符串 device-height
initial-scale // 设置设备宽度与 viewport大小之间的缩放比例，0.0-10.0之间的正数
maximum-scale // 设置最大缩放系数，0.0-10.0之间的正数
minimum-scale // 设置最小缩放系数，0.0-10.0之间的正数
user-scalable // 如果设置为 no 用户将不能缩放网页，默认为 yes，yes / no
*/

在 ios10 以上的系统中，并不支持 meta 标签，需要我们通过脚本实现：

window.addEventListener("touchmove",function(event) {
        if(event.scale !== 1) {
            event.preventDefault();
        }
    }, 
    {
        passive: false
    }
);

可能这里不太懂得就是 {passive:false} 得作用这和我们以前学得 DOM 二级事件监听怎么不一样，其实相较于以前对象字面量得写法得优点是：提升页面滑动的流畅度。顺便复习下，以前得 DOM 二级是这样写得：

target.addEventListener(type, listener, useCapture);

type 表示事件，listener 是一个回调函数， useCapture ，useCapture 参数用来控制监听器是在捕获阶段执行还是在冒泡阶段执行，选填，默认为 false 表示冒泡，true 为捕获阶段。在事件处理函数中，会传递 event 对象作为事件处理函数的参数，而这个参数最常用的 2 个方法就是

event.preventDefault();  // 阻止事件继续传播
event.stopPropagation(); // 取消事件的默认行为

至此 DOM 二级得监听得第三个参数都是一个简单得 Boolean 类型值。但目前 DOM 规范做了修订：addEventListener() 的第三个参数可以是个对象值了，也就是说第三个参数现在可以是两种类型的值了。对象里面包含得值有：

document.addEventListener(type, fn, {
    capture: false,
    passive: false,
    once: false
})

capture 就是 冒泡阶段或者事件捕获阶段, true 事件捕获阶段
once 是执行一次 fn 就清除fn,传true为清除。
passive 比较特殊，由于浏览器必须要在执行事件处理函数之后，才能知道有没有掉用过 preventDefault() ，这就导致了浏览器不能及时响应滚动，略有延迟。测试禁止滚动，但是我们移动手指事实上还是滚动了。

window.addEventListener("touchmove",function(event) {
        for(let i = 0;i < 100000;i++){
            console.log(i)
        };
        event.preventDefault();
    },false
);

那么，在滚动的时候，事件函数的效率可能过低，而等待这个函数完成再进行滚动的体验就会有卡顿的感觉，所以现在有了这么个选项：passive。在高版本的 webkit 内核浏览器里 passive是默认为 true 的，所以想禁止滚动发现不生效的时候 passive 为 false。

另外在 Chrome 浏览器中，如果发现耗时超过 100 毫秒的非 passive 的监听器，会在 DevTools 里面警告你加上 {passive: true}。

还有一种方法也是针对苹果不兼容得：

// 苹果手机的缩放
try {
        // 禁用双击缩放
        document.addEventListener("touchstart", function(event) {
                if (event.touches.length > 1) {
                        event.preventDefault();
                }
        });
        var lastTouchEnd = 0;
        document.addEventListener("touchend",function(event) {
                var now = new Date().getTime();
                if (now - lastTouchEnd <= 300) {
                        event.preventDefault();
                }
                lastTouchEnd = now;
        },false);
        // 禁用双指手势操作
        document.addEventListener("gesturestart", function(event) {
                event.preventDefault();
        });
} catch (error) {}

下面是移动端常用得视口标签：

<!-- 视图窗口，移动端特属的标签。 -->
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
<!-- 是否启动webapp功能，会删除默认的苹果工具栏和菜单栏。 -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- 这个主要是根据实际的页面设计的主体色为搭配来进行设置。 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- 忽略页面中的数字识别为电话号码,email识别 -->
<meta name="format-detection"content="telephone=no, email=no" />
<!-- 启用360浏览器的极速模式(webkit) -->
<meta name="renderer" content="webkit">
<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微软的老式浏览器 -->
<meta name="MobileOptimized" content="320">
<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC应用模式 -->
<meta name="browsermode" content="application">
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app"> 
<!-- windows phone 点击无高光 -->
<meta name="msapplication-tap-highlight" content="no">

如何使用 js 判断当前页面是 pc 还是移动端打开的

一般网页和PC在一个项目里面进行开发得时候常用，它得位置配置在路由得地方。

function browserRedirect() {
    sUserAgent = navigator.userAgent.toLowerCase();
    let bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
    let bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
    let bIsMidp = sUserAgent.match(/midp/i) == "midp";
    let bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
    let bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
    let bIsAndroid = sUserAgent.match(/android/i) == "android";
    let bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
    let bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
    document.writeln("您的浏览设备为：");
    if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
        document.writeln("phone");
    } else {
        document.writeln("pc");
    }
}

browserRedirect();

没啥好讲的结束。

昨天发生一件事还是挺震撼得，我工位后面得一个 go 语言区块链开发工程师被辞退了，因为他入职还没几天肯定不是技术原因，原因就是公司经常性得加班，不止如此，周六还得过来，结果周六他晚上五点多走了，公司正常来讲六点下班，然后直接悲剧了。

这还不是重要的，重要得是今天老大，我们技术总监找前端和 UI 谈话了，我那几个同事听说上午被讲了，因为他们都是下班就走了，我是下午单独叫过去得，老大对我还不错没说啥，可能因为我基本都是八点左右走算是公司走的最晚得了，反正就委婉得让我一三五加班，其他日子加不加看自己项目进度，如果自己提前做完了就帮帮同事。

结果下午快下班得时候我们三个前端一个男 UI 开了个会协调下工作，其中有个女 UI 没来开因为老大没找他谈话。我们一致得决定就是活慢慢干，一三五必须加班也就是八点之后走，周六也难逃一劫了。不过听他们得意思都是和我一样期望快点过年，言外之意大家都懂的。其实不是反对加班只是反对不是太有意义得经常性加班。

2019年12月6日00点16分