zoukankan      html  css  js  c++  java
  • 移动端和pc端的判断,不同端做不同的处理

    1.通过js判段是pc端还是移动端

    function browserRedirect() {
    	var type = "";
        var sUserAgent = navigator.userAgent.toLowerCase();
        var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
        var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
        var bIsMidp = sUserAgent.match(/midp/i) == "midp";
        var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
        var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
        var bIsAndroid = sUserAgent.match(/android/i) == "android";
        var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
        var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
        if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
        	type = "notpc";
        } else {
        	type = "pc";
        }
        return type;
    }

    使用到的对象:navigator.userAgent

    Navigator 对象包含有关浏览器的信息

    userAgent 属性是一个只读的字符串,声明了浏览器用于 HTTP 请求的用户代理头的值。

    一般来讲,它是在 navigator.appCodeName 的值之后加上斜线和 navigator.appVersion 的值构成的。

    例如:Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.2; SV1; .NET CLR 1.1.4322)。

    注:用户代理头:user-agent header。

    2.使用css的媒体查询做处理

    .box{display: block;color:red;}
    @media(max- 1024px){
        .box{display:none;}
    }   
    

    box元素在pc端显示,在移动端隐藏,通过浏览器的窗口大小判断,弊端就是浏览器缩小也会受影响

  • 相关阅读:
    springboot 搭建druid数据监控
    spring-boot编写简易mvc
    解决rabbitmq 开启启动报错
    intelij idea 使用maven打包报错 Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3.8.1
    php foreach循环引用的问题
    手把手编写hyperf JsonRpc demo
    centos8配置nfs教程本机系统mac
    Java基础的练习题
    Java——循环
    Java——数组
  • 原文地址:https://www.cnblogs.com/wgl0126/p/9378045.html
Copyright © 2011-2022 走看看