基于当前浏览器的Width和Height的JavaScript CSS选择

| 好吧，我通常不问任何问题，而且我已经坚持了20多个小时...这种糟透了... 无论如何，我都试图创建一个检测浏览器分辨率的JavaScript，并根据浏览器分辨率，比较语句为页面重新加载选择最合适的CSS。我知道它更容易使用百分比，但是对于此项目包含的内容，这是无法完成的。所以我坚持写一些基本的东西，并且由于某些迟钝的原因似乎找不到错误... 一切工作顺利进行到比较语句为止。 这是脚本： 
</head>

<script type=\"text/javascript\">
function smallTest() {
  var myWidth = 0, myHeight = 0;
  if( typeof( window.innerWidth ) == \'number\' ) {
    //Non-IE
    myWidth = window.innerWidth;
    myHeight = window.innerHeight;
  } else if( document.documentElement && ( document.documentElement.clientWidth ||     document.documentElement.clientHeight ) ) {
    //IE 6+ in \'standards compliant mode\'
    myWidth = document.documentElement.clientWidth;
   myHeight = document.documentElement.clientHeight;
  } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
    //IE 4 compatible
    myWidth = document.body.clientWidth;
    myHeight = document.body.clientHeight;
  }
}

if ((myWidth == 1280) && (myHeight == 768))
       {document.write(\"<link href=\'css/Foo.1280.800.css\' rel=\'stylesheet\' type=\'text/css\'>\");} 

        else if (( myWidth == 800) && ( myHeight == 600))      
         { document.write(\"<link href=\'css/Foo.1024.768.css\' rel=\'stylesheet\' type=\'text/css\'>\");}

        else if (( myWidth == 1024) && ( myHeight == 768))      
         { document.write(\"<link href=\'css/Foo.1024.768.css\' rel=\'stylesheet\' type=\'text/css\'>\");}

        else if ( (myWidth == 1280) && ( myHeight == 1040))      
          {document.write(\"<link href=\'css/Foo.1280.1040.css\' rel=\'stylesheet\' type=\'text/css\'>\");}

        else if (( myWidthh == 1600) && ( myHeight == 900))      
          {document.write(\"<link href=\'css/Foo.1600.900.css\' rel=\'stylesheet\' type=\'text/css\'>\");}

    else if (( myWidth == 1920) && ( myHeight == 1080))      
          {document.write(\"<link href=\'css/Foo.1920.1080.css\' rel=\'stylesheet\' type=\'text/css\'>\");}

    else if ( (myWidth == 1920) && ( myHeight == 1200))      
          { document.write(\"<link href=\'css/Foo.1920.1200.css\' rel=\'stylesheet\' type=\'text/css\'>\");}

</script>
<body window.onload=\"smallTest()\">
    
2020-01-05 4 条评论
分享

没有找到相关结果

    已邀请:

    瓜唱鬼

    不要检查确切的尺寸。每个人的浏览器窗口的大小都将不同，并且您不太可能获得太多与您的CSS完全匹配的用户。 进行相对比较： 
    if (width < 800) && (height < 600) {
      use \"microscopic\" page layout
} else {
    ....
}
    您可以使用
    screen.width
    和
    screen.height
    检查实际的屏幕分辨率，但是，并非所有人都拥有标准尺寸的屏幕。如果它们在VM内运行，则它们的屏幕分辨率可能是VM在其中显示的窗口的大小，不可能与标准屏幕分辨率完全匹配。     
    2020-01-05 0 0
    分享

    诞胃

    您将窗口大小与屏幕分辨率混淆了。您得到的是窗口的分辨率，但是您正在尝试将其与屏幕的分辨率相比较，而后者将永远不会匹配。 
    window.screen
    提供有关屏幕分辨率的信息（如果您碰巧需要的话），但是我强烈建议您不要使用它，而只是在宽松的条件下使用： 
    if((myWidth >= 800) && (myWidth >= 600)){
   ...
}else if((myWidth >= 1024) && (myHeight >= 768)){
   ...
}
    尽管由于这些数字是基于屏幕分辨率的，所以高度将始终较小，而宽度将始终较小，因此，仅使用以下方法可能会更好： 
    if(myWidth >= 750){
    ...
}else if(myWidth >= 950){
    ...
}
        
    2020-01-05 0 0
    分享

    慷祈霖黑

    这是脚本解决方案： 描述：确定浏览器的宽度和高度，并基于分辨率提供最能满足其需求的CSS脚本。非常适合信息显示目的，要求所用显示器的尺寸正确。 
    if (document.body && document.body.offsetWidth) {
winW = document.body.offsetWidth;
winH = document.body.offsetHeight;
}
if (document.compatMode==\'CSS1Compat\' && document.documentElement && document.documentElement.offsetWidth ) 
{
winW = document.documentElement.offsetWidth;
winH = document.documentElement.offsetHeight;
}
if (window.innerWidth && window.innerHeight) {
 winW = window.innerWidth;
winH = window.innerHeight;
}

if ( winW < 801)      
     { document.write(\"<link href=\'css/xxxxxxxxxxxxxxx.css\' rel=\'stylesheet\' type=\'text/css\'>\");}

    else if (( winW <= 1024) && ( winW > 801))      
     { 
        if (winH >= 768)
        {document.write(\"<link href=\'css/xxxxxxxxxxxxxxx.css\' rel=\'stylesheet\' type=\'text/css\'>\");}
        else if (winH < 768)
        {document.write(\"<link href=\'css/xxxxxxxxxxxxxxx.css\' rel=\'stylesheet\' type=\'text/css\'>\");}
     }

    else if ((winW <= 1280) && (winW > 1024))
     { 
        if (winH >=801)
     {document.write(\"<link href=\'css/xxxxxxxxxxxxxxx.css\' rel=\'stylesheet\' type=\'text/css\'>\");}
        else if (winH < 801)
        {document.write(\"<link href=\'css/xxxxxxxxxxxxxxx.css\' rel=\'stylesheet\' type=\'text/css\'>\");}
     }

    else if (( winW <= 1600) && ( winW > 1280))
     { 
        if (winH >=900)
     {document.write(\"<link href=\'css/xxxxxxxxxxxxxxx.css\' rel=\'stylesheet\' type=\'text/css\'>\");}
        else if (winH < 900)
        {document.write(\"<link href=\'css/xxxxxxxxxxxxxxx.css\' rel=\'stylesheet\' type=\'text/css\'>\");}
     }      

    else if ( winW > 1600)     
     { 
        if (winH >=1200)
     {document.write(\"<link href=\'css/xxxxxxxxxxxxxxx.css\' rel=\'stylesheet\' type=\'text/css\'>\");}
        else if (winH < 1200)
        {document.write(\"<link href=\'css/xxxxxxxxxxxxxxx.css\' rel=\'stylesheet\' type=\'text/css\'>\");}
     }
        
    2020-01-05 0 0
    分享
    为什么被折叠? 0 个回复被折叠

    要回复问题请先登录或注册

    或代码 OrCode.com 备案号：粤ICP备15020848号-1
    Escape time: 0.042381048202515