html 判断iPhone手机端型号

最新推荐文章于 2021-07-01 11:19:07 发布

努力变的更好

最新推荐文章于 2021-07-01 11:19:07 发布

阅读量1.3k

点赞数

本文链接：https://blog.csdn.net/qq_26622469/article/details/103240917

版权

本文介绍了一种通过JavaScript检测用户设备类型，并根据设备类型（如Android、iOS不同型号）加载相应CSS样式的方法，实现网页在不同设备上的适配。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

    console.log(navigator.userAgent);
    console.log(navigator.appVersion);
    console.log(navigator)
    if(events.indexOf('Android')>-1 || events.indexOf('Linux')>-1 || events.indexOf('Adr')>-1){
        console.log("安卓手机");
        document.write('<link rel="stylesheet" type="text/css" href="../wechat/css/android.css"/>');

    }else if(events.indexOf('iPhone')>-1){
        //根据尺寸进行判断苹果的型号
        if(screen.height == 812 && screen.width == 375){
            console.log("苹果X");
             document.write('<link rel="stylesheet" type="text/css" href="../wechat/css/ios.css"/>');

        }else if(screen.height == 736 && screen.width == 414){
            console.log("iPhone7P - iPhone8P - iPhone6P");
             document.write('<link rel="stylesheet" type="text/css" href="../wechat/css/ios.css"/>');

        }else if(screen.height == 667 && screen.width == 375){
            console.log("iPhone7 - iPhone8 - iPhone6");
             document.write('<link rel="stylesheet" type="text/css" href="../wechat/css/ios56.css"/>');

        }else if(screen.height == 568 && screen.width == 320){
            console.log("iPhone5");
             document.write('<link rel="stylesheet" type="text/css" href="../wechat/css/ios56.css"/>');

        }else{
            console.log("iPhone4");
        }
    }
    </script>

根据不同手机类型读取不同的CSS文件类型

<script>
	var browser = {
	versions: function () {
	var u = navigator.userAgent, app = navigator.appVersion;
	return { //移动终端浏览器版本信息 
	ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端 
	android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或uc浏览器 
	iPhone: u.indexOf('iPhone') > -1, //是否为iPhone或者QQHD浏览器 
	iPad: u.indexOf('iPad') > -1, //是否iPad 
	};
	}(),
	};
	if (browser.versions.iPhone || browser.versions.iPad || browser.versions.ios) {
	    document.write('<link rel="stylesheet" type="text/css" href="../wechat/css/ios.css"/>');  
	}
	if (browser.versions.android) {
	document.write('<link rel="stylesheet" type="text/css" href="../wechat/css/android.css"/>');  
	}

</script>