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

ゝ一世哀愁。 2022-08-21 00:28 76阅读 0赞

> 前言

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

> 获取浏览器可视宽高

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

> 判断手机屏幕密度比

var DPR = window.devicePixelRatio;

> 判断手机类型

> 屏幕分辨率

屏幕分辨率：屏幕宽高*设备密度比 例：宽*高=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判断这些数据后可以做出更好的适配。