判断浏览器,各浏览器页面高度自适应(平铺),各浏览器自适应去除滚动条,浏览器分辨率自适应

WEB前端 waitig 577℃ 百度已收录 0评论

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src = "jquery-1.11.0.min.js"></script>
</head>
<style>
    body,html{
        padding:0px;
        margin:0px;
    }
    .containner{
        width: 100%;
        background-color: green;
    }
</style>
<body>
    <div class = "containner"></div>
</body>
<script type="text/javascript">
    var screenHeight = window.screen.height;
    var availHeight = window.screen.availHeight;
    var heightnum = heightNum();
   $(".containner").css("height",heightnum);
   function myBrowser(){
    var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
    if (userAgent.indexOf("Firefox") > -1) {
        return "FF";
    } //判断是否Firefox浏览器
    if (userAgent.indexOf("Chrome") > -1){
      return "Chrome";
     }
    if(!!window.ActiveXObject || "ActiveXObject" in window){
        return "IE"; 
    }//判断是否IE浏览器

}
function heightNum(){
    var height;
    var mb = myBrowser();
    if ("IE" == mb) {
        height = availHeight-78
    }
    if ("FF" == mb) {
        height = availHeight-93
    }
    if ("Chrome" == mb) {
        height = availHeight-66
    }
    return (height+"px")
}

</script>
</html>


本文由【waitig】发表在等英博客
本文固定链接:判断浏览器,各浏览器页面高度自适应(平铺),各浏览器自适应去除滚动条,浏览器分辨率自适应
欢迎关注本站官方公众号,每日都有干货分享!
等英博客官方公众号
点赞 (0)分享 (0)