基于当前浏览器宽度和高度的 JavaScript CSS 选择答案

【问题标题】：JavaScript CSS Selection based on current Browser's Width and Height基于当前浏览器宽度和高度的 JavaScript CSS 选择
【发布时间】：2011-08-29 22:45:24
【问题描述】：

好吧，我通常尽量不问问题，我已经坚持了 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()">

【问题讨论】：

条件以某种方式阻止了 CSS 加载。 idk y
这是一个媒体查询的工作。

标签： javascript css javascript-events browser-detection

【解决方案1】：

不要检查确切的尺寸。每个人的浏览器窗口都会有不同的大小，您不太可能获得太多与您的 css 完全匹配的用户。

改为进行相对比较：

if (width < 800) && (height < 600) {
      use "microscopic" page layout
} else {
    ....
}

您可以使用screen.width 和screen.height 检查实际的屏幕分辨率，但同样，并非每个人都有标准尺寸的屏幕。如果它们在 VM 中运行，它们的屏幕分辨率可能是 VM 在其中显示的窗口的大小，这不太可能与标准屏幕分辨率完全匹配。

【讨论】：

【解决方案2】：

您将窗口大小与屏幕分辨率混淆了。您得到的是窗口的分辨率，但您试图将其与 屏幕的分辨率进行比较，永远不会匹配。

window.screen 有关于屏幕分辨率的信息，如果你碰巧想要的话，但我强烈建议不要使用它，而只是做宽松的条件：

if((myWidth >= 800) && (myWidth >= 600)){
   ...
}else if((myWidth >= 1024) && (myHeight >= 768)){
   ...
}

虽然这些数字是基于屏幕分辨率的，但高度总是会更小，而宽度几乎总是会更小，所以你可能会更好：

if(myWidth >= 750){
    ...
}else if(myWidth >= 950){
    ...
}

【讨论】：

我使用的是窗口分辨率。因此，当人们调整浏览器窗口的大小时，它应该更改网页以更好地适应他们的工作环境。我正在使用 Mozilla 浏览器，但由于某种原因它仍然无法正常工作。当我只对 css 使用 document.write 时它可以工作，但是当我添加条件时它不起作用

【解决方案3】：

这里是脚本解决方案：

描述：确定浏览器的宽度和高度，并根据分辨率提供最能满足其需求的 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'>");}
     }

【讨论】：