Esses dias tive necessidade de fazer um desenvolvimento para detectar a resolução do monitor do usuário e realizar algumas customizações na tela.
Teoricamente uma tarefa super simples, porém nem tudo que parece é … pro meu azar nesse caso …. via javascript você só consegue pegar a resolução do monitor principal então quando o usuário usa o modo estendido de monitor, não é possível pegar a resolução do monitor secundário com screen.width e screen.height … ainda tentei pesquisar chorar mas não tem jeito … com js não é possível hoje “2012”…
Depois de pensar um pouco comecei a bolar uma solução alternativa … embora ele não me retorne a resolução ele me retorna a posição correta dos elementos =) … logo a solução foi ..
Via js crio uma div e posiciono a mesma no canto direito inferior , usando position:fixed com bottom: 0px e right:0px , depois via js eu pego a posição real top e left.
Isso me da areá total visível da pagina o que é menor que a resolução, mas o necessário para minha customização.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” >
<head>
<title>Untitled Page</title>
</head>
<body>
<div style=”width:auto;height:auto;background-color:red;”>
teste
</div>
<script language=”javascript” type=”text/javascript”>
try {
var divResolucao = document.createElement(“div”);
document.body.appendChild(divResolucao);
divResolucao.setAttribute(“style”, “position:fixed;bottom: 0px; right:0px;width: 10px;
height:10px;background-color:red”);
alert(divResolucao.offsetLeft + ‘ – ‘ + divResolucao.offsetTop);
} catch (e) {
alert(e);
}
</script>
</body>
</html>
Arquitetura e Desenvolvimento de Software 