JS判断用户终端与CSS判断用户终端的写法（源代码实例）

news2025/2/24 9:20:40

当用户使用手机等移动终端访问网站时，我们可以通过程序检测用户终端类型，如果是手机用户，则引导用户访问适配手机屏幕的移动站点。

JS判断用户终端：

// 判断浏览器类型
myBrowser() {
    var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
    if (userAgent.indexOf("OPR") > -1) {
        return "Opera";
    } //判断是否Opera浏览器 OPR/43.0.2442.991
    if (userAgent.indexOf("Firefox") > -1) {
        return "FF";
    } //判断是否Firefox浏览器  Firefox/51.0
    if (userAgent.indexOf("Trident") > -1) {
        return "IE";
    } //判断是否IE浏览器  Trident/7.0; rv:11.0
    if (userAgent.indexOf("Edge") > -1) {
        return "Edge";
    } //判断是否Edge浏览器  Edge/14.14393
    if (userAgent.indexOf("Chrome") > -1) {
        return "Chrome";
    } // Chrome/56.0.2924.87
    if (userAgent.indexOf("Safari") > -1) {
        return "Safari";
    } //判断是否Safari浏览器 AppleWebKit/534.57.2 Version/5.1.7 Safari/534.57.2
}

CSS判断用户终端：

<style>
 
        /*手机*/
        @media screen and (max-width:600px){
            .box_2 {
                padding-top: 45px;
                padding-bottom: 50px;
                /* background: #fff; */
                /* 添加背景图片 */
                background-image: url("Home/images/bgP.jpg");
                background-size: 100% 100%;
                background-repeat: no-repeat;
                background-position: center;
            }
        }
        /*平板*/
        @media screen and (min-width:600px) and (max-width:960px){
            .box_2 {
                padding-top: 45px;
                padding-bottom: 50px;
                /* background: #fff; */
                /* 添加背景图片 */
                background-image: url("Home/images/bg2.jpg");
                background-size: 100% 100%;
                background-repeat: no-repeat;
                background-position: center;
            }
        }
        /*PC*/
        @media screen and (min-width:960px){
            .box_2 {
                padding-top: 45px;
                padding-bottom: 50px;
                /* background: #fff; */
                /* 添加背景图片 */
                background-image: url("Home/images/bg2.jpg");
                background-size: 100% 100%;
                background-repeat: no-repeat;
                background-position: center;
            }
        }
 
    </style>

js判断终端后，返回h5播放器

选取要分享的视频(酷播云)