检测手机类型、密度比和物理宽高

前言

随着智能手机的兴起，各大厂商手机产品层出不穷，产品可谓是五花八门，手机的尺寸和密度没有一个固定标准，作为一个前端面对各式各样不同尺寸的手机常常让人觉得痛疼。近几年前端被吹捧的热火朝天，在产品眼里前端无所不能，只有想不到没有做不到。前端需要适配各种终端机承受巨大压力，这次小弟自我总结来说说移动端机型的检测，小弟初生牛犊，如有说的不对的地方欢迎各位大咖指正。

获取浏览器可视宽高

var dWidth = document.documentElement.clientWidth || document.body.clientWidth;
var dHeight = document.documentElement.clientHeight ||document.body.clientHeight;

判断手机屏幕密度比

var DPR = window.devicePixelRatio;

判断手机类型

var u = navigator.userAgent;
    if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) {//安卓手机
        alert("安卓手机");
    } else if (u.indexOf('iPhone') > -1) {//苹果手机
        alert("苹果手机");
    } else if (u.indexOf('Windows Phone') > -1) {//winphone手机
        alert("winphone手机");
    }else if (u.indexOf('PlayBook') > -1) {//黑莓平板\手机
        alert("黑莓");
    } else{
        alert("宝宝没见过~")
    }

屏幕分辨率

屏幕分辨率：屏幕宽高设备密度比 例：宽高=360*640，密度比=2，屏幕分辨率=720*1280

判断机型版本（安卓版）

function getAndroidVersion() {
        var ua = navigator.userAgent.toLowerCase();
        var match = ua.match(/android\s([0-9\.]*)/);
        return match ? match[0] : false;
    };

总结：移动端手机类型、密度比、分辨率对前端开发非常重要，根据移动终端机系统和系统版本，我们可以更快速的给出项目解决方案，通过JS判断这些数据后可以做出更好的适配。