檢測屏幕分辨率

我遇到了網站http://www.swiftkey.net。檢測屏幕分辨率

在我的寬屏幕上，我看到內容區域兩側的灰色背景。在我的常規（1024x768）灰色條紋不在那裏。

他們如何獲得這種效果？

用Firebug，我能夠破譯我覺得可能是這樣：

.w1 { 
    float: left; 
    width: 1600px; 
    position: relative; 
    left: 50%; 
} 
.w2 { 
    float: left; 
    width: 1600px; 
    position: relative; 
}

我有CSS和HTML的遭遇，但上面的代碼是一個有點神祕的對我來說，尤其是考慮w2在w1內。

來源

2012-09-25 user1698144

看看媒體查詢 – jacktheripper

同意使用媒體查詢：http://www.w3.org/TR/css3-mediaqueries/ – pivot

我假設你在談論的灰色條正在回答這個

Sample Screenshot 1 Sample Screenshot 2

：第二樣本圖像中示出的那些3210

簡單的回答是，網頁使用的包裝與被水平居中靜態最大寬度：通過具有在<body>或<html>物體的背景色

#wrapper { 
    max-width: 1000px; 
    margin: 0 auto; //centers a block element 
}

的灰色條被創建：

body { 
    background-color: #888; 
}

我還沒有檢查過源代碼，看看這些樣式是在哪裏專門設置的，我將把它作爲讀者的練習。

來源

2012-09-25 18:26:54 zzzzBov

你忘了提及text-align：center;必須設置在包含元素的邊距：0px auto;以元素爲中心。 – Dom

@ DominicB-c，[這是完全不正確的]（http://jsfiddle.net/hU3Fp/）。 – zzzzBov

你確定嗎？並非所有瀏覽器都會自動將內容與該命令自動對齊嗎？我花了很多年看着如何對我的網頁和文本對齊：中心;作爲最好和最廣泛支持的解決方案，在網絡上出現了好幾次。 – Dom

這有造詣的JavaScript畫面目標

var scr=window.screen; 
var availwidth=scr.availWidth; 
var width=scr.width; 
var availh=scr.availHeight; 
var height=scr.height;

availWidth和availHeight使實際可用的寬度和高度，考慮到任務欄和滾動條等寬度和高度給予實際的屏幕分辨率。然後訪問變量並確定佈局的類型。

但是調整什麼中心很容易

div 
{ 
width:1024px; 
position:absolute; 
left:50%; 
margin-left:-512px; 
}

的JavaScript屏幕寬度跟蹤可以爲更多的控制選項

來源

2012-09-25 18:10:39 geekman

您不需要JavaScript使CSS在不同的分辨率下表現不同。 – zzzzBov

是的，但標題說檢測屏幕分辨率，所以我添加了js部分，你看。 – geekman

標題有誤導性。閱讀正確的問題和答案。 – zzzzBov

檢測屏幕分辨率

回答

相關問題