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