HTML中需要知道的一些判断

Posted 2020-09-14

0.引子

html开发中真的难免会碰到很多时候需要判断的情况，

比如说：1.判断是手机端还是电脑端?

           2.是微信呢还是支付宝呢，还是普通的手机浏览器？

           3.是安卓还是ios？

           4.是横屏还是竖屏？

           5.是ie呢还是谷歌，亦或是火狐浏览器？

我这里就是一些总结吧，持续待续。。。

 

1. 判断移动设备是横屏还是竖屏

废话不多说，上代码：

 1  window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() {
 2       // 横屏状态
 3       if (window.orientation === 90 || window.orientation === -90 )      {
 4                 alert(‘横屏状态！‘);
 5       }
 6       //竖屏状态
 7       if (window.orientation === 180 || window.orientation === 0) {
 8                alert(‘竖屏状态！‘);
 9       }
10 
11 }, false);

作用：iOS需要强制竖屏或者横屏时，html上的一些标签方法不起作用时，可使用这个监控使用不同的脚本，CSS

2.判断是微信呢还是支付宝呢，还是普通的手机浏览器？     

 1 //是否微信浏览器
 2 function isWeiXin() {
 3     var ua = window.navigator.userAgent.toLowerCase();
 4     if (ua.match(/MicroMessenger/i) == ‘micromessenger‘) {
 5         return true;
 6     } else {
 7         return false;
 8     }
 9 }
10 
11 //是否微信浏览器
12 function isAlipay() {
13     var ua = window.navigator.userAgent.toLowerCase();
14     if (ua.match(/alipayclient/i) == ‘alipayclient‘) {
15         return true;
16     } else {
17         return false;
18     }
19 }

3.判断是手机端还是电脑端?

function ispc(){
    var ispc=true; //是否pc
    var userAgentInfo = navigator.userAgent;
    var Agents = ["android", "android", "iPhone", "Windows Phone", "iPad", "iPod"];
    for (var v = 0; v < Agents.length; v++) {
        if (userAgentInfo.indexOf(Agents[v]) > 0) {
            ispc = false;
            break;
        }
    }
    return ispc;
}

//判断是否为移动端还是pc
function browserRedirect() {
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) {
return true;
}
return false;
}

 4.是ie呢还是谷歌，亦或是火狐浏览器？

 

1 function isIE() { //ie
2     if (!!window.ActiveXObject || "ActiveXObject" in window)
3         return true;
4     else
5         return false;
6 }

5.待续...