如何使用Javascript来获取访客显示器分辨率？

我正在建立一个高级网页设计的网站，我被困在某些东西上。我希望页面的内容（包含在<div>中）居中。使用CSS我试过这个：如何使用Javascript来获取访客显示器分辨率？

body {text-align: center; margin-left: auto; margin-right:auto;}

这似乎没有工作。我知道你可以使用Javascript检测浏览器的解析，并且我开始思考。我将如何检测宽度，并使用它来设置身体的左右边距？这将是((resolutionWidth - 800)/2)来确定我需要的边距（<div>是800px宽）。

2011-12-12 Josh I

margin: 0 auto是到中心网站上的内容最简单的方法之一。除非你绝对必须，否则不要使用JS将内容居中。

看看这个的jsfiddle如何使用margin: 0 auto：http://jsfiddle.net/NfRtV/

2011-12-12 05:00:04

margin: auto只适用于元素有宽度。尝试指定宽度并重新测试您的代码！

body { 
    width: 500px; 
    margin: auto; 
    border: 1px solid black; 
    text-align: center; 
}

无法检测其显示器的分辨率，但可以检测屏幕的宽度和高度。这些都可以通过javascript访问。虽然你显然不应该那样做，因为有一个CSS方法可以这样做。

viewportwidth = window.innerWidth; 
    viewportheight = window.innerHeight;

2011-12-12 04:57:49 mrtsherman

你可以用'位置：relative'为好'body'元素：HTTP：//的jsfiddle .net/5Td5Q/ –

woops，更新了我的答案。第一反应是错误的。该元素只需要一个宽度。 – mrtsherman

将宽度设置为与auto边距相同的元素。因此，像这样：

#page { width: 800px; margin: 0 auto; }

在IE浏览器的一些版本，这是不行的，所以裹div围绕这个元素，给它text-align: center，并在孩子的div复位。

示例标记：

<body> 
    <div id="ie-page-center"> 
    <div id="page"> 
    ... 
    </div> 
    </div> 
</body>

范例CSS：

#ie-page-center { text-align: center; } 
#page { width: 800px; margin: 0 auto; text-align: left; }

2011-12-12 04:59:51

使用此代码

<script language="javascript"> alert('Width:' + screen.width+ ' & Height: ' +screen.height); </script>

2011-12-12 05:10:15

回答