检测屏幕分辨率

我遇到了网站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

检测屏幕分辨率

回答

相关问题