的JavaScript CSS選擇和高度

好，我一般儘量不問問題，我一直停留在這個長達20小時... ...這種吸...的JavaScript CSS選擇和高度

反正我試圖創建一個檢測瀏覽器分辨率的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()">

來源

2011-05-20 user763349

什麼是錯誤？ – 2011-05-20 20:19:53

該條件以某種方式防止加載CSS。 idk y – user763349 2011-05-20 20:59:08

這是媒體查詢的工作。 – Knu 2011-05-21 04:59:53

不要檢查精確的尺寸。每個人的瀏覽器窗口將會有不同的大小，你不可能有太多的用戶與你的CSS完全匹配。

做的相對比較，而不是：

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

，你可以檢查實際的屏幕分辨率，使用screen.width和screen.height，但同樣，不是每個人都會有一個標準尺寸的屏幕。如果他們在虛擬機內部運行，他們的屏幕分辨率可能與虛擬機內部顯示的窗口大小不同，這與標準屏幕分辨率不太可能完全匹配。

來源

2011-05-20 20:20:29

你正混淆窗口大小與屏幕分辨率。什麼你得到的是窗口的分辨率，但是你要比較它的屏幕的分辨率，這永遠不會匹配。

window.screen大約有屏幕分辨率的信息，如果你碰巧想，但我會強烈建議不要使用它，而不是僅僅做更寬鬆的條件：

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

雖然因爲這些數字是基於屏幕分辨率，高度將永遠是少，寬度幾乎總是少，所以你可能會只有更好：

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

來源

2011-05-20 20:24:20

我正在使用窗口分辨率。因此，當人們調整瀏覽器窗口大小時，應該更改網頁以更好地適應他們的工作環境。我正在使用Mozilla瀏覽器，但由於某些原因它仍然無法工作。它適用於當我只使用document.write的CSS，但是當我添加一個條件它不起作用 – user763349 2011-05-20 20:37:40

這裏是腳本的解決方案：

說明：決定了瀏覽器的寬度和高度，並根據該決議它提供了一個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'>");} 
    }

來源

2011-05-25 19:22:17 user763349

的JavaScript CSS選擇和高度

回答

相關問題